/*
 * Overlays: one cross to close them all, and on a phone the menu as a full-screen panel (Kirill, 2026-10-22: the
 * picture viewer, the mini cart, the filters and the menu each had a cross of their own; the menu dropped down under
 * the header and the page beneath it kept scrolling, unlike the filters and the support chat).
 *
 * js/overlays.js holds the page still under an overlay (gpScrollLock, the way the support chat does it: body fixed in
 * place, so iOS does not scroll it either), marks <html> gp-menu-open and gp-chat-open, and gives the menu its head
 * row (title and cross). The menu itself is the header's (Fluent snippets 192, 193, 194).
 */

/* ── The cross ──────────────────────────────────────────────────────────────── */

/* The support chat's, as the filters panel already had it: a 36px button, lucide's "x" 24px with 2px strokes, in
   the text colour, the accent under a pointer. The chat renders it in its own shadow root; the icon is drawn here
   with a mask, so whatever the button held (WooCommerce's thinner cross) is hidden. */
:is(.gp-lightbox__close, .gp-mobile-menu__close, .gp-woof-close-btn, .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--primary);
	opacity: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

:is(.gp-lightbox__close, .gp-mobile-menu__close, .gp-woof-close-btn, .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button) > svg {
	display: none;
}

:is(.gp-lightbox__close, .gp-mobile-menu__close, .gp-woof-close-btn, .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button)::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
	:is(.gp-lightbox__close, .gp-mobile-menu__close, .gp-woof-close-btn, .wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button):hover {
		background: transparent;
		color: var(--wp--preset--color--accent);
	}
}

/* Where it sits: the top right corner, 10px from the top and 14px from the side, as in the chat. The filters panel
   puts it at the end of its title row instead. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button {
	top: 10px;
	inset-inline-end: 14px;
}

/* ── The menu on a phone: the whole screen, a head row with its title and the cross ── */

@media (max-width: 991px) {
	nav#mobile-menu.mobile-menu {
		inset: 0;
		width: auto;
		height: 100dvh;
		max-height: none;
		padding: 0 var(--gp-phone-gutter, 10px) calc(24px + env(safe-area-inset-bottom, 0px));
		background-color: #0b0b0b; /* the filters panel's */
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 100001;
	}

	.gp-mobile-menu__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		margin: 0 calc(-1 * var(--gp-phone-gutter, 10px)) 8px;
		padding: 0 14px 0 var(--gp-phone-gutter, 10px);
		background-color: inherit;
	}

	.gp-mobile-menu__title {
		font-family: Onest, sans-serif;
		font-size: 22px;
		font-weight: 700;
		color: var(--wp--preset--color--primary);
	}

	/* Nothing floats over the open menu: the chat's button and the catalog's filters tab */
	html.gp-menu-open #gp-support-widget {
		display: none;
	}
}