/*
 * header.css - site header, primary navigation, mobile header, off-canvas
 * panel, search dialog.
 *
 * Every value is measured from the live site (spec/06-header-nav-footer.md).
 * The breakpoint is 768px and there is no in-between state: at 769px the
 * desktop header is present and #mobile-header is display:none; at 768px it
 * inverts.
 *
 * The 768/767 mismatch between GeneratePress and GenerateBlocks is resolved on
 * 768 throughout, as a recorded one-pixel behaviour change.
 */

/* ==========================================================================
   Header shell
   ========================================================================== */

.site-header {
	background-color: var(--header-bg);
	color: var(--header-text);
	position: relative;
}

.site-header a {
	color: var(--header-text);
}

.inside-header {
	align-items: center;
	display: flex;
	padding: var(--header-padding);
}

.inside-header.grid-container {
	max-width: var(--container-header);
}

.site-branding {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	text-align: left;
}

.main-title {
	color: var(--site-title);
	font-family: var(--font-title);
	font-size: var(--fs-title);
	font-weight: var(--fw-title);
	line-height: 1.2em;
	margin: 0;
	text-transform: none;
	word-wrap: break-word;
}

.main-title a,
.main-title a:hover,
.main-title a:visited {
	color: var(--site-title);
}

.nav-float-right #site-navigation {
	margin-left: auto;
}

/*
 * Front page only. GP Element 1086 merged the header into the hero, so the
 * whole header block is lifted out of flow and the hero starts at y=0.
 */
@media (min-width: 769px) {

	.header-wrap {
		left: 0;
		position: absolute;
		right: 0;
		z-index: var(--z-header-wrap);
	}

	.header-wrap .site-header {
		background: var(--header-bg-merged);
	}

	.header-wrap #site-navigation:not(.toggled),
	.header-wrap #mobile-header:not(.toggled),
	.header-wrap .mobile-menu-control-wrapper {
		background: transparent;
	}

	.header-wrap .main-navigation .main-nav ul li:hover > a,
	.header-wrap .main-navigation .main-nav ul li[class*="current-menu-"] > a {
		background-color: transparent;
	}
}

/* The awkward band where the nav no longer fits beside the wordmark. */
@media (max-width: 800px) and (min-width: 769px) {

	.inside-header {
		align-items: center;
		flex-direction: column;
	}

	.site-branding {
		margin-bottom: 1.5em;
	}

	#site-navigation {
		margin: 0 auto;
	}
}

/* ==========================================================================
   Primary navigation
   ========================================================================== */

.main-navigation {
	background-color: var(--nav-bg);
	clear: both;
	display: block;
	padding: 0;
	z-index: var(--z-nav);
}

.main-navigation .inside-navigation {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation .main-nav > ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.main-navigation a {
	color: var(--nav-text);
	display: block;
	font-family: var(--font-nav);
	font-size: var(--fs-nav);
	font-weight: 400;
	text-decoration: none;
	text-transform: none;
}

.main-navigation .main-nav ul li a {
	line-height: var(--lh-nav);
	padding-left: 20px;
	padding-right: 20px;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
	padding-right: 0;
	position: relative;
}

/*
 * Top-level items change colour on hover, NOT background (owner decision
 * 2026-08-10). GeneratePress painted a white --nav-hover-bg panel behind the
 * hovered item, which on the light header read as a floating box tacked onto the
 * wordmark row. Sub-menu items keep their background hover; that rule is further
 * down and is scoped to `ul ul`, so it still wins there.
 */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	background-color: transparent;
	color: var(--nav-hover-text);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: var(--nav-current-bg);
	color: var(--nav-text);
}

/* --------------------------------------------------------------- dropdowns */

.main-navigation ul ul {
	background-color: var(--subnav-bg);
	box-shadow: var(--shadow-subnav);
	float: left;
	height: 0;
	left: -99999px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	text-align: left;
	top: auto;
	transition: var(--transition-subnav);
	width: 200px;
	z-index: var(--z-subnav);
}

/*
 * Panels open to the RIGHT (owner decision 2026-08-10).
 *
 * GeneratePress ran this menu with nav_dropdown_direction:left and the theme
 * originally reproduced it faithfully, class name and all: the first-level panel
 * was pinned right:0 so it hung off the parent's right edge, and each deeper
 * panel was pushed out to right:100%, i.e. leftward across the screen. That read
 * as backwards, so both directions are flipped here. The .sub-menu-left class is
 * gone from header.php; nothing should reintroduce it.
 */
.main-navigation .sub-menu {
	left: 0;
	right: auto;
}

.main-navigation:not(.toggled) ul li.sfHover > ul,
.main-navigation:not(.toggled) ul li:hover > ul {
	height: auto;
	left: 0;
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
	right: auto;
	transition-delay: 150ms;
}

/* Deeper panels sit against the outside edge of the panel that opened them. */
.main-navigation:not(.toggled) ul ul li.sfHover > ul,
.main-navigation:not(.toggled) ul ul li:hover > ul {
	left: 100%;
	right: auto;
	top: 0;
}

.main-navigation ul ul li {
	width: 100%;
}

.main-navigation .main-nav ul ul li a {
	color: var(--subnav-text);
	font-size: var(--fs-subnav);
	line-height: normal;
	padding: var(--subnav-item-padding);
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
	background-color: var(--subnav-hover-bg);
	color: var(--subnav-hover-text);
}

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	background-color: var(--subnav-hover-bg);
	color: var(--subnav-current-text);
}

/* --------------------------------------------------------------- arrows */

.menu-item-has-children .dropdown-menu-toggle {
	clear: both;
	display: inline-block;
	height: 100%;
	padding-left: 10px;
	padding-right: 20px;
}

.menu-item-has-children ul .dropdown-menu-toggle {
	margin-top: -12px;
	padding-bottom: 12px;
	padding-top: 12px;
}

nav ul ul .menu-item-has-children .dropdown-menu-toggle {
	float: right;
}

/*
 * In the toggled mobile nav the panels stack vertically, so the sub-level arrow
 * has to point DOWN rather than along. It targets .icon-arrow-right since the
 * flip to right-opening panels; before that it was .icon-arrow-left at -90deg,
 * and leaving that selector behind would have silently matched nothing.
 */
nav.toggled .icon-arrow-right svg {
	transform: rotate(90deg);
}

nav.toggled .sfHover > a > .dropdown-menu-toggle .gp-icon svg,
.slideout-navigation .sfHover > a > .dropdown-menu-toggle .gp-icon svg {
	transform: rotate(180deg);
}

/* ==========================================================================
   Cart and search icons
   ========================================================================== */

.main-navigation .menu-bar-items {
	align-items: center;
	display: flex;
	font-family: var(--font-nav);
	font-size: var(--fs-button);
}

.main-navigation .menu-bar-items a {
	color: inherit;
}

.main-navigation .menu-bar-item {
	position: relative;
}

.main-navigation .menu-bar-item.search-item {
	z-index: 20;
}

.main-navigation .menu-bar-item > a {
	line-height: var(--lh-nav);
	padding-left: 20px;
	padding-right: 20px;
}

.cart-contents {
	align-items: center;
	display: flex;
}

/* An empty cart shows the bag alone, with no "0" bubble beside it. */
.number-of-items.no-items {
	display: none;
}

.number-of-items {
	background-color: var(--cart-bubble-bg);
	border-radius: var(--radius-round);
	font-size: 11px;
	height: 18.7px;
	line-height: 18.7px;
	margin-left: 5px;
	position: relative;
	text-align: center;
	width: 18.7px;
}

/* --------------------------------------------------------- mini-cart flyout

   The panel a customer sees the instant they add a piece to the cart, so it is
   on the conversion path and it is the one place in the header where being
   half-styled reads as broken.

   GP Premium supplied about a dozen rules for the panel body plus the two
   `#wc-mini-cart` colour rules that made it opaque, and none of it was
   migrated when this theme dropped GP Premium's eight stylesheets. Measured
   before this block existed: the panel rendered with NO background at all, the
   sidebar's "Filter by price" widget legible straight through it, the remove
   control a red glyph on the wrong side, and the two pill buttons drawing
   #3a3a3a text on #222222 because `.main-navigation .menu-bar-items a` sets
   `color:inherit` and the panel inherits `--header-text`.

   Three things shape every rule below.

   1. It has to stand alone. inc/assets.php dequeues woocommerce-general,
      -layout and -smallscreen on any template that renders no commerce markup,
      so on an article the flyout gets no core CSS whatsoever. Measured there
      with a real cart: the product thumbnail rendered at its intrinsic 300x300
      and the remove control as a full-width block, 503px of panel for one item.
   2. It also has to WIN where core CSS is present (/shop/, product, cart), so
      each selector below carries one more class than the core rule it
      out-ranks. `a.remove` needs !important because core ships
      `color:#a00!important`; GP Premium had to do the same thing.
   3. It has to survive a cart fragment replacement. WooCommerce replaces
      `div.widget_shopping_cart_content` and nothing else, so `.wc-mini-cart`,
      `.inside-wc-mini-cart` and `.widget_shopping_cart` all outlive the swap
      and every selector here is anchored on one of them. No rule depends on
      state, an id, or a class that only exists after some event.
   -------------------------------------------------------------------------- */

.wc-mini-cart {
	background-color: var(--base-3);
	box-shadow: var(--shadow-mini-cart);
	/*
	 * Reset the inherited --header-text once, here. Everything inside the panel
	 * sits on white, and this is what stops the buttons rendering dark-on-dark.
	 */
	color: var(--text);
	height: 0;
	left: -99999px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: left;
	transition: var(--transition-subnav);
	visibility: hidden;
	width: var(--mini-cart-width);
	z-index: var(--z-mini-cart);
}

/*
 * :focus-within is the keyboard route in, and it is an improvement on live
 * rather than a port of it: GP Premium shipped
 * `body:not(.using-mouse) .wc-menu-item.sfHover .wc-mini-cart{display:none}`,
 * which hides the panel from keyboard users outright, so the remove control in
 * it is reachable today by mouse only. nav.js drops the panel's aria-hidden
 * while it is revealed, so focus never lands inside a subtree screen readers
 * are told to skip.
 */
.wc-menu-item.has-items:hover .wc-mini-cart,
.wc-menu-item.has-items:focus-within .wc-mini-cart,
.wc-menu-item.has-items.sfHover .wc-mini-cart {
	height: auto;
	left: auto;
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
	transition-delay: 150ms;
	visibility: visible;
}

/* An empty cart has nothing to preview. */
.wc-menu-item:not(.has-items) .wc-mini-cart {
	display: none;
}

/*
 * WCAG 1.4.13: content revealed on hover or focus has to be dismissible
 * without moving the pointer. nav.js sets this class on Escape and clears it
 * when the pointer leaves the item or focus moves out of it, so a dismissal
 * lasts exactly as long as the interaction that produced it.
 */
.wc-menu-item.rlj-mini-cart-dismissed .wc-mini-cart {
	display: none;
}

.wc-mini-cart .widget_shopping_cart {
	/* Without this the panel inherits the 15px nav size. GP's value is 14px. */
	font-size: 14px;
	line-height: 1.45;
	padding: 15px;
}

.wc-mini-cart .widget_shopping_cart ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The thumbnail is absolutely positioned and the row reserves space for it,
 * because the markup nests the image INSIDE the product link along with the
 * product name, so there is no element to give a grid or flex column to.
 * The right-hand reserve is for the remove control.
 */
.wc-mini-cart .widget_shopping_cart ul.cart_list li {
	list-style: none;
	margin: 0;
	min-height: 48px;
	padding: 0 30px 0 62px;
	position: relative;
}

.wc-mini-cart .widget_shopping_cart ul.cart_list li + li {
	margin-top: 15px;
}

.wc-mini-cart .widget_shopping_cart ul.cart_list li img {
	border-radius: var(--radius-image);
	float: none;
	height: 48px;
	left: 0;
	margin: 0;
	/* The source is square today; cover keeps a future non-square file honest. */
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 48px;
}

.wc-mini-cart .widget_shopping_cart .cart_list li > a:not(.remove) {
	color: var(--text);
	display: block;
	font-weight: 700;
	padding: 0;
	text-decoration: none;
}

.wc-mini-cart .widget_shopping_cart .cart_list li > a:not(.remove):hover,
.wc-mini-cart .widget_shopping_cart .cart_list li > a:not(.remove):focus {
	text-decoration: underline;
}

.wc-mini-cart .widget_shopping_cart .cart_list li .quantity {
	/* #595959 on white is 7.0:1, the same value the blogroll uses for meta. */
	color: var(--meta);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/*
 * Top right, matching live. Core puts it top LEFT and absolutely positioned,
 * which is what the unstyled candidate was showing, and colours it #a00 with
 * !important, which is why the colour here needs !important too.
 */
.wc-mini-cart .widget_shopping_cart .cart_list li a.remove {
	align-items: center;
	background: none !important;
	border: 1px solid currentColor;
	border-radius: var(--radius-round);
	color: var(--meta) !important;
	display: flex;
	float: none;
	font-size: 15px;
	font-weight: 400;
	height: 22px;
	justify-content: center;
	left: auto;
	line-height: 1;
	position: absolute;
	right: 0;
	text-decoration: none;
	top: 0;
	width: 22px;
}

.wc-mini-cart .widget_shopping_cart .cart_list li a.remove:hover,
.wc-mini-cart .widget_shopping_cart .cart_list li a.remove:focus {
	background: none !important;
	color: var(--text) !important;
}

/*
 * Full-bleed band: the negative margin cancels the widget's 15px padding, the
 * way GP's `#wc-mini-cart .total{margin:15px -15px}` did. `p.` beats core's
 * `.woocommerce.widget_shopping_cart .total`, which would otherwise tie on
 * specificity and be decided by stylesheet order.
 */
.wc-mini-cart .widget_shopping_cart p.woocommerce-mini-cart__total {
	background-color: var(--wash);
	border: 0;
	font-size: 14px;
	margin: 15px -15px;
	padding: 12px 15px;
}

.wc-mini-cart .widget_shopping_cart p.woocommerce-mini-cart__buttons {
	display: flex;
	gap: 10px;
	margin: 0;
}

/*
 * Deliberate deviation from live, and the only one in this block: GP sized
 * each button `calc(50% - 10px)`, which leaves about 16px of dead space at the
 * right-hand end of the row and reads as a mistake. These share the row.
 * The colour is restated because `.main-navigation .menu-bar-items a` sets
 * `color:inherit` and out-ranks the pill rule in legacy-customizer.css.
 * 10px/15px is GP's padding: the pill's own 12px/28px does not leave room for
 * "VIEW CART" in a 125px button.
 */
.wc-mini-cart .widget_shopping_cart p.woocommerce-mini-cart__buttons a.button {
	color: var(--btn-text);
	flex: 1 1 0;
	font-size: 14px;
	margin: 0;
	padding: 10px 15px;
	text-align: center;
	width: auto;
}

.wc-mini-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
	color: var(--meta);
	margin: 0;
}

/*
 * Hidden below the breakpoint, which is live's behaviour
 * (`@media (max-width:768px){#wc-mini-cart{display:none}}` in GP Premium's
 * dynamic CSS). There is no hover on a phone, the mobile header is 390px wide
 * with a 300px panel to place in it, and the bag link still goes to /cart/.
 */
@media (max-width: 768px) {

	.wc-mini-cart {
		display: none;
	}
}

/* ==========================================================================
   The hamburger. Hidden above the breakpoint; three copies exist, only the one
   inside #mobile-header is ever pressable.
   ========================================================================== */

.menu-toggle {
	background-color: transparent;
	border: 0;
	/* Without this the hamburger inherits the base button's white and vanishes. */
	color: var(--nav-text);
	cursor: pointer;
	display: none;
	font-family: var(--font-nav);
	font-size: var(--fs-button);
	font-weight: 400;
	line-height: var(--lh-nav);
	margin: 0;
	padding: 0 20px;
	text-align: center;
	text-transform: none;
}

button.menu-toggle:hover,
button.menu-toggle:focus,
button.menu-toggle:active {
	background-color: transparent;
	color: var(--nav-text);
}

.has-menu-bar-items button.menu-toggle {
	flex-grow: 0;
}

.main-navigation.has-branding .menu-toggle {
	flex-grow: 0;
	order: 2;
	padding-right: 20px;
}

/* The bars and the X share one wrapper and swap on the .toggled state. */
.icon-menu-bars svg:nth-child(2) {
	display: none;
}

.toggled .icon-menu-bars svg:first-child {
	display: none;
}

.toggled .icon-menu-bars svg:nth-child(2) {
	display: block;
}

/* The magnifier holds a second X glyph that nothing on this site reveals. */
.icon-search svg:nth-child(2) {
	display: none;
}

.mobile-menu-control-wrapper {
	align-items: center;
	display: none;
	margin-left: auto;
}

/* ==========================================================================
   Mobile header
   ========================================================================== */

#mobile-header {
	display: none;
}

.navigation-branding {
	align-items: center;
	display: flex;
	margin-right: 10px;
	order: 0;
}

.navigation-branding .main-title {
	line-height: var(--lh-nav);
}

.navigation-branding .main-title a {
	color: var(--nav-text);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: unset;
}

@media (max-width: 1450px) {

	#site-navigation .navigation-branding {
		margin-left: 10px;
	}
}

/* --------------------------------------------------------------- the swap */

@media (max-width: 768px) {

	.site-header,
	#site-navigation {
		display: none;
	}

	#mobile-header {
		display: block;
		width: 100%;
	}

	.has-inline-mobile-toggle .mobile-menu-control-wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	.main-navigation .menu-toggle {
		display: block;
	}

	/*
	 * The inline mobile menu is never shown: the toggle opens the off-canvas
	 * panel instead. The list stays in the DOM so aria-controls resolves.
	 */
	#mobile-header .main-nav > ul,
	.main-navigation.toggled .main-nav > ul {
		display: none;
	}

	#mobile-header .main-nav {
		flex: 0 0 100%;
		order: 4;
	}

	.navigation-branding {
		margin-left: 10px;
		margin-right: auto;
	}

	/*
	 * The 10px here is a SECOND indent, on top of .navigation-branding's own,
	 * which is how the live wordmark starts at x=20 rather than x=10 at 390px.
	 * Measured before this rule existed: baseline x=20, candidate x=10.
	 */
	.navigation-branding .main-title {
		font-size: var(--fs-title-mobile);
		line-height: var(--lh-nav-mobile);
		margin-left: 10px;
	}

	.main-navigation .main-nav ul li a,
	.main-navigation .menu-toggle,
	.main-navigation .menu-bar-item > a {
		line-height: var(--lh-nav-mobile);
	}

	.main-navigation .menu-toggle,
	.main-navigation .menu-bar-item > a {
		padding-left: var(--mobile-menu-item-padding);
		padding-right: var(--mobile-menu-item-padding);
	}

	.main-navigation .menu-bar-item:hover > a,
	.main-navigation .menu-bar-item.sfHover > a {
		background: none;
		color: var(--nav-text);
	}
}

/*
 * Known, reproduced defect: below 408px the branding plus the icons leave less
 * than the 46px the hamburger needs, so it wraps to a second row and the mobile
 * header doubles to 100px. That is the real appearance on every common phone
 * width (360/375/390/393), so it is reproduced rather than fixed here: fixing
 * it moves every mobile screenshot on the site by 50px and it is not on the
 * approved-deviation list. WP2 owns the fix, after owner sign-off, together
 * with the sub-menu contrast change.
 */

/* ==========================================================================
   Off-canvas panel. slideout_menu_style = overlay, so this is a full-viewport
   opacity fade at 100% width, not a slide. None of offside.js's transform
   machinery applies and none of it is reproduced.
   ========================================================================== */

.slideout-navigation {
	background-color: var(--slideout-bg);
	display: none;
	height: 100vh;
	left: 0;
	overflow: auto;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	transition: opacity var(--transition-slideout), visibility var(--transition-slideout);
	width: 100%;
	z-index: var(--z-slideout);
}

.slideout-navigation.is-open,
.slideout-navigation.slideout-transition {
	display: block;
}

.slideout-navigation.slideout-transition {
	opacity: 0;
}

.slideout-navigation.is-open:not(.slideout-transition) {
	opacity: 1;
}

.slideout-navigation,
.slideout-navigation a {
	color: var(--slideout-text);
}

.slideout-navigation .inside-navigation {
	display: flex;
	flex-direction: column;
	max-width: 700px;
	padding: 10% 10% 0;
	text-align: center;
}

.slideout-navigation .main-nav {
	margin: 0 auto 40px;
	min-width: 250px;
}

.slideout-navigation .slideout-widget {
	margin: 20px auto;
	min-width: 250px;
}

.slideout-navigation .slideout-menu {
	display: block;
}

.slideout-navigation .slideout-menu li {
	clear: both;
	float: none;
	margin-bottom: 5px;
	text-align: center;
	width: 100%;
}

.slideout-navigation .slideout-menu li a {
	display: inline-block;
	font-size: var(--fs-slideout);
	line-height: var(--slideout-item-height);
}

.slideout-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.slideout-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.slideout-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: var(--slideout-active-bg);
	color: var(--slideout-active-text);
}

/* Sub-menus stack in place rather than flying out. */
.slideout-navigation .main-nav ul ul {
	background: none;
	box-shadow: none;
	display: none;
	height: auto;
	left: 0;
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
	position: relative;
	top: 0;
	width: 100%;
}

.slideout-navigation .main-nav ul ul.toggled-on {
	display: block;
}

.slideout-navigation .main-nav ul ul li a {
	color: var(--slideout-text);
	font-size: var(--fs-slideout);
	padding: 0 20px;
}

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
	border-left: 1px solid rgba(0, 0, 0, 0.07);
	float: none;
	margin: 0 0 0 10px;
	padding: 0 10px;
}

.slideout-navigation button.slideout-exit {
	background: none;
	border: 0;
	box-sizing: border-box;
	color: var(--slideout-text);
	font-size: 25px;
	padding: 20px;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	width: auto;
}

button.slideout-exit:hover,
button.slideout-exit:focus {
	background-color: transparent;
}

@media (max-width: 768px) {

	.slideout-navigation .slideout-menu li a,
	.slideout-navigation .main-nav ul ul li a {
		font-size: var(--fs-slideout-mobile);
	}

	.slideout-navigation button.slideout-exit {
		position: static;
		text-align: center;
		width: 100%;
	}
}

/* ==========================================================================
   Search dialog. Class names are a hard contract: Advanced Woo Search renders
   its own form in here and its inline JS references .gp-modal__overlay and
   #gp-search by name.
   ========================================================================== */

.gp-modal:not(.gp-modal--open):not(.gp-modal--transition) {
	display: none;
}

.gp-modal--transition:not(.gp-modal--open) {
	pointer-events: none;
}

.gp-modal__overlay {
	align-items: center;
	backdrop-filter: blur(3px);
	background: var(--modal-overlay);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	position: fixed;
	transition: opacity var(--transition-modal);
	z-index: var(--z-modal);
}

.gp-modal--open:not(.gp-modal--transition) .gp-modal__overlay {
	opacity: 1;
}

.gp-modal__container {
	max-height: 100vh;
	max-width: 100%;
	padding: 0 10px;
	transform: scale(0.9);
	transition: transform var(--transition-modal);
}

.gp-modal--open:not(.gp-modal--transition) .gp-modal__container {
	transform: scale(1);
}

.gp-search-modal .gp-modal__overlay {
	align-items: flex-start;
	padding-top: 25vh;
}

.search-modal-form {
	background-color: var(--base-3);
	color: var(--contrast);
	display: flex;
	max-width: 100%;
	width: var(--search-modal-width);
}

.search-modal-form .search-field,
.search-modal-form .search-field:focus {
	appearance: none;
	background-color: transparent;
	border: 0;
	color: currentColor;
	height: var(--search-field-height);
	width: 100%;
}

.search-modal-form label {
	display: block;
	flex: 1 1 auto;
}

.search-modal-form .search-submit {
	background-color: transparent;
	border: 0;
	color: currentColor;
	width: var(--search-field-height);
}

/*
 * The Advanced Woo Search path. AWS replaces the theme's form through the
 * get_search_form filter and styles its own with
 * `.aws-container .aws-search-form{width:100%;height:44px}`, so the dialog is
 * 44px tall and as narrow as its parent unless something supplies the modal
 * geometry. On the live site AWS supplied it, but only because it recognised
 * GeneratePress by name; it cannot recognise this theme, and the four rules
 * below never reached the page (measured: modal 209x44 against 500x60 live).
 *
 * So the theme owns them now. They are what AWS used to print, value for value.
 * The classes they hang off are guaranteed by rlj_search_modal_form() whether
 * or not the plugin is active, which is what closes risk R10 for good: if AWS
 * is ever deactivated, searchform.php renders and the .search-modal-form rules
 * above size it identically.
 *
 * 17px and 10px/15px are the plugin's own values for its field, not design
 * tokens, which is why they are literals here.
 */
.aws-modal-container {
	max-width: 100%;
	width: var(--search-modal-width);
}

.aws-modal-container .search-modal-form {
	height: var(--search-field-height);
}

.aws-modal-container .aws-search-field {
	font-size: 17px;
	padding: 10px 15px;
}

.aws-modal-container .aws-search-form .aws-form-btn {
	background: transparent;
	border: 0;
}