/*
 * 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 var(--gp-hover-out) 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: var(--gp-icon-x) center / contain no-repeat; /* global.css */
	mask: var(--gp-icon-x) 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 in a panel: at the end of the head row, centred on it, 14px from the side, as in the chat (the panels'
   section below). The mini cart's is placed over its drawer by WooCommerce; the menu's and the filters' sit in their
   head rows. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close.wc-block-components-button {
	top: calc((var(--gp-panel-head) - 36px) / 2);
	inset-inline-end: 14px;
}

/* ── Panels: the mini cart, the phone menu, the filters ─────────────────────────── */

/* One look for the panels that slide over the page (Kirill, 2026-10-23: "унифицируем с кастомной панелью фильтров и с
   меню... везде одинаковый заголовок"): the cards' grey (the menu and the filters were black, #0b0b0b), a head row
   with the title and the cross centred on one line (the mini cart's title stood 56px down under its cross, the menu's
   and the filters' were 22px), and the mini cart's slide, WooCommerce's 0.3s: the mini cart and the menu in from
   the screen's right edge, the filters up from the bottom, from their tab (the menu appeared at once, the filters slid
   in 0.1s). The mini cart's part: cart-common.css; the filters': shortcodes/gp-woof/gp-woof.css. */
:root {
	--gp-panel-background: var(--wp--preset--color--custom-card-background); /* #232323, the cards' */
	--gp-panel-head: 60px; /* the head row: the title's capitals 19px under the top, centred on the cross */
	--gp-panel-slide: 0.3s; /* the mini cart's own (WooCommerce's drawer) */
}

/* The mini cart's drawer beside the page, wider than a phone: a little more room above (Kirill, 2026-10-23) */
@media (min-width: 481px) {
	:root {
		--gp-panel-head: 68px;
	}
}

/* The title, its words in sentence case ("Мой заказ": storefront/strings.php and js/wc-strings.js), 26px as the pages'
   section headings: the mini cart's 34px outweighed the cross beside it (Kirill, 2026-10-23) */
:is(.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents h2.wc-block-mini-cart__title, .gp-mobile-menu__title, .woof-slide-out-div .gp-woof-header-row .gp-woof-header) {
	margin-block: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: var(--gp-panel-head);
}

/* ── Layers: what floats over the page and what covers it ──────────────────────── */

/* At the bottom of a phone's screen, the tab bar (998, tabbar.css) and, on a product page, the add-to-cart button over
   it (999, product.css). Where there is no tab bar (the checkout), the support chat's own button floats there (snippet
   213's widget, 9999), at the page's gutter from the side (layout.css; Kirill, 2026-10-23: at 12px its edge flickered
   against the content's 10px while scrolling). An open panel covers what floats instead of hiding it: hidden, it came
   back only after the panel had gone, a blink at every close (Kirill, 2026-10-23). Bottom to top: the tab bar (998),
   the cart button (999), the header and the cookie banner (1000), the chat's button (9999), the filters panel
   (10000), the open chat (10001), the mini cart (10002), the phone menu (100002). */

/* The chat's widget in its container (the widget is fixed inside a shadow root), above the filters panel while it is
   open. Its launcher on a phone at the page's gutter: gp-chat reads --sw-launcher-inset-x, which inherits into the
   shadow root (gp-chat's README). The variable applies at every width, so it is set for phones only (the widget's
   own phone breakpoint, 640px); on a wider screen the launcher keeps the widget's 24px. */
#gp-support-widget {
	position: relative;
	z-index: 9999;
	transition: z-index 0s linear var(--gp-panel-slide); /* closing: down once it has gone */
}

@media (max-width: 640px) {
	#gp-support-widget {
		--sw-launcher-inset-x: var(--gp-phone-gutter, 10px);
	}
}

html.gp-chat-open #gp-support-widget {
	z-index: 10001;
	transition: none;
}

/* The mini cart's drawer and its shade over the tab and the chat (WooCommerce gives it 9999) */
body .wc-block-components-drawer__screen-overlay {
	z-index: 10002;
}

/* The phone menu lives in the header (#custom-header, z-index 1000, snippet 194), so the header goes over everything
   while the menu is open and while it slides out */
@media (max-width: 991px) {
	header#custom-header {
		transition: z-index 0s linear var(--gp-panel-slide);
	}

	html.gp-menu-open header#custom-header {
		z-index: 100002;
		transition: none;
	}
}

/* ── 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: var(--gp-panel-background);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 100001;
	}

	/* In from the right as the mini cart, out the same way. Snippet 194 showed and hid it with display, which cannot
	   slide: it stays in place, off the screen and hidden (no focus, no taps) while closed. */
	nav#mobile-menu.mobile-menu {
		display: block;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform var(--gp-panel-slide) ease, visibility 0s linear var(--gp-panel-slide);
	}

	nav#mobile-menu.mobile-menu[aria-hidden="false"] {
		visibility: visible;
		transform: none;
		transition: transform var(--gp-panel-slide) ease;
	}

	.gp-mobile-menu__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--gp-panel-head);
		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;
		color: var(--wp--preset--color--primary);
	}

}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	nav#mobile-menu.mobile-menu,
	nav#mobile-menu.mobile-menu[aria-hidden="false"] {
		transition: none;
	}
}