/* ==========================================================================
   WGE Mobile UX v1.2.1
   Everything mobile-specific is inside @media (max-width: 767px) so desktop
   is untouched. Tune the breakpoint here AND in wge-mobile-ux.php.

   Nothing here may style `#secondary` or anything inside it — the sidebar and
   its mobile filter drawer belong to nhff-woowidget-sidebar-categories. The
   theme's own OPEN FILTERS bar (`.page-grid > .mobile`) is *not* part of that:
   it is theme markup in woocommerce/archive-product.php that stays in the page
   when the sidebar plugin moves the sidebar into its drawer, so pinning it is
   this plugin's layout concern (section 2a).
   ========================================================================== */

:root {
	--wge-bar-h: 56px;          /* measured at runtime by the JS */
	--wge-admin-offset: 0px;    /* WP admin bar, when it is fixed */
	--wge-bar-bg: #000;         /* sampled from the theme bar by the JS */

	/* The theme publishes its palette as custom properties from
	   best_shop_custom_css(); --gbl-primary-color is #a12324 by default. Track
	   it rather than hardcoding a red the site does not use. */
	--wge-accent: var(--gbl-primary-color, #a12324);

	--wge-line: #e4e4e4;        /* borders on the white page surfaces */

	/* Black chrome, matching the theme's header bar and the sidebar widget. */
	--wge-dark: #000;

	--wge-tap: 44px;            /* minimum tap target */
	--wge-buybar-h: 72px;       /* keeps page padding and back-to-top in sync */

	/* `.container`'s horizontal padding (style.css:1197). Used to bleed the
	   sticky OPEN FILTERS strip full-width in §2a-2. This exists so that bleed
	   never has to reach for `100vw`, which includes the scrollbar and so
	   overflows the viewport by exactly the scrollbar's width. */
	--wge-gutter: 15px;
}

/* --------------------------------------------------------------------------
   1. BACK TO TOP  (every viewport)

   NOT scoped to the mobile block, deliberately. The theme prints its own
   `.backtotop` (inc/wge-woocommerce.php) only when the Customizer's
   `enable_back_to_top` is ticked, and drives it from js/backtotop.js. 1.2.0
   scoped this replacement to `max-width:767px`, which left every viewport from
   768px up with no button at all whenever that setting is off — which is the
   state this site is actually in. A back-to-top is not a mobile-only
   affordance, so it now applies everywhere and the theme's is hidden wherever
   ours is present.

   `.wge-has-totop` is set by the JS, so if the script never runs the theme's
   button (if enabled) is left exactly as it was.
   -------------------------------------------------------------------------- */

.wge-totop {
	position: fixed;
	right: 10px;   /* same corner the theme used */
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 9994;              /* under the buy bar (9995), over the page */
	display: grid;
	place-items: center;
	width: var(--wge-tap, 44px);
	height: var(--wge-tap, 44px);
	padding: 0;
	background: var(--wge-accent, #a12324);
	color: #fff;
	border: 0;
	/* style.css:8474 sets `button { border-radius:0 !important }`. */
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	/* Kept in the layout and faded, so the reveal can transition. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.wge-totop.is-visible {
	opacity: .92;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.wge-totop:hover,
.wge-totop:focus-visible { opacity: 1; }

.wge-totop__arrow {
	width: 10px;
	height: 10px;
	margin-top: 3px;   /* optically centres a chevron drawn from two borders */
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}

/* One button in that corner, not two. */
body.wge-has-totop .backtotop { display: none !important; }

/* Ride above the sticky buy bar. That bar is mobile-only, so this is too. */
@media (max-width: 767px) {
	body.wge-buybar-visible .wge-totop {
		bottom: calc(var(--wge-buybar-h, 72px) + 12px + env(safe-area-inset-bottom, 0px));
	}
}

/* --------------------------------------------------------------------------
   2. MOBILE-ONLY LAYOUT
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* --- 2a. Sticky header ------------------------------------------- */

	/* The theme prints TWO nested elements carrying this class —
	   `div.shop-header-bar > div.shop-header-bar.inner` (site-header.php) — so
	   the child combinator is load-bearing: fixing both would take the inner
	   one out of flow, collapse the outer bar to zero height and make the
	   --wge-bar-h measurement (and therefore the body offset) wrong. */
	body.wge-sticky-header #masthead > .shop-header-bar {
		position: fixed;
		top: var(--wge-admin-offset, 0px);
		left: 0;
		right: 0;
		z-index: 9990;
		background: var(--wge-bar-bg, #000);
	}

	/* topbar.css caps the bar at max-height:34px, which clips the enlarged
	   44px search button (2b below). */
	#masthead > .shop-header-bar,
	#masthead > .shop-header-bar > .shop-header-bar.inner {
		max-height: none !important;
		min-height: 48px;
	}

	#masthead > .shop-header-bar { padding: 0 8px; }

	/* The inner bar keeps the theme's own `justify-content:space-between`
	   (topbar.css) — cart left, search right. 1.1.0 forced flex-start here to
	   make room for the hamburger at the left edge; the hamburger is gone. */
	#masthead > .shop-header-bar > .shop-header-bar.inner {
		width: 100%;
		padding: 0;
		gap: 8px;
	}

	body.wge-sticky-header { padding-top: var(--wge-bar-h); }

	/* Let the search field use whatever the cart total does not */
	body.wge-sticky-header .shop-header-bar .header-bar-right { min-width: 0; }
	body.wge-sticky-header .shop-header-bar .woocommerce-product-search { max-width: 100%; }

	/* --- 2a-2. Sticky OPEN FILTERS bar --------------------------------
	 *
	 * Theme markup: `.page-grid > .mobile > .open-sidebar > a.open-filter`
	 * (woocommerce/archive-product.php:36-45, and the same block in
	 * template-catalog-world.php:48-55 for the Sci-Fi/Fantasy landing pages).
	 * style.css:8807-8811 shows `.page-grid .mobile` only under 767px — the
	 * same breakpoint as this block — and it is the one filter control on
	 * mobile, since the sidebar plugin binds its drawer to that link. So it
	 * rides under the header bar instead of scrolling away with the first row
	 * of products.
	 *
	 * `position:sticky`, not `fixed`: it stays a flex item of `.page-grid`, so
	 * it pins while the loop is on screen, releases at the footer, and needs no
	 * layout offset of its own. `.page-grid` is a flex column under 1024px
	 * (style.css:1000) and no ancestor clips overflow, so sticky resolves.
	 *
	 * Nothing here touches `#secondary` or the drawer — the sidebar plugin
	 * still owns both, and it relocates only `.main-sidebar` and
	 * `form.woocommerce-ordering`, never this bar.
	 * ------------------------------------------------------------------ */
	body.wge-sticky-header .page-grid > .mobile {
		position: sticky;
		top: calc(var(--wge-admin-offset, 0px) + var(--wge-bar-h, 56px));
		z-index: 9980;   /* under the header bar (9990), over the loop */

		/* `.container` carries `padding:0 15px` (style.css:1197), which would
		   leave gutters for the loop to scroll through beside an inset strip.
		   Bleed the black full width and put the padding back inside.

		   Bleed by that known padding, NOT by `calc(50% - 50vw)`: `100vw`
		   includes the scrollbar and the viewport does not, so the vw form made
		   this strip 15px wider than the page and gave every archive page a
		   horizontal scrollbar (measured 419px inside a 404px viewport). Do not
		   answer that with `overflow-x:hidden` on an ancestor — this bar and the
		   header are both `position:sticky`, which an overflow ancestor kills.

		   --wge-gutter must track `.container`'s padding; if the theme changes
		   it, change it here. */
		margin-left: calc(var(--wge-gutter, 15px) * -1);
		margin-right: calc(var(--wge-gutter, 15px) * -1);
		padding: 6px var(--wge-gutter, 15px);
		background: var(--wge-dark, #000);
	}

	body.wge-sticky-header .page-grid > .mobile .open-sidebar { margin: 0; }

	/* --- 2b. Tap targets --------------------------------------------- */

	/* topbar.css absolutely positions this button as a 15px icon *inside* the
	   search field (left:10px, top:12px, the input carrying padding-left:35px).
	   Growing it to 44px without re-anchoring it would drop a 44px button on
	   top of the text field, so the input grows with it and the button is
	   re-centred on the left edge. */
	.header-bar-right .woocommerce-product-search input.search-field {
		height: var(--wge-tap) !important;
		padding-left: var(--wge-tap) !important;
	}

	.woocommerce-product-search button {
		left: 0 !important;
		top: 50% !important;
		transform: translateY(-50%);
		display: inline-grid !important;
		place-items: center;
		width: var(--wge-tap) !important;
		height: var(--wge-tap) !important;
		min-width: var(--wge-tap);
		min-height: var(--wge-tap);
		padding: 0 !important;
	}

	/* The theme caps the icon at max-width:15px, which would beat width alone. */
	.woocommerce-product-search button img {
		width: 18px !important;
		height: 18px !important;
		max-width: 18px !important;
	}

	/* NOTE: there is deliberately nothing here for the homepage carousel dots.
	   css/frontpage.css already hides them under 800px
	   (`.desktop, .slick-dots { display:none !important }`), so the 12px
	   mis-tap target this plugin used to enlarge does not exist on mobile —
	   and re-showing it would undo a theme decision. */

	/* Pagination links */
	.woocommerce-pagination .page-numbers li a,
	.woocommerce-pagination .page-numbers li span {
		display: inline-grid;
		place-items: center;
		min-width: var(--wge-tap);
		min-height: var(--wge-tap);
	}

	/* --- 2c. Archive head -------------------------------------------- */
	.wge-archive-head { padding: 12px 0 4px; }

	.wge-breadcrumb {
		font-size: 12px;
		color: #666;
		margin: 0 0 6px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.wge-crumb-sep { margin: 0 6px; color: #bbb; }

	/* h1 inherits Bebas Neue from the theme (--gbl-primary-font); the theme's
	   own line-height:1.8 leaves a huge gap above the loop. */
	.wge-archive-title {
		margin: 0 0 10px;
		font-size: 26px;
		line-height: 1.1;
	}

	.wge-breadcrumb a { color: var(--wge-accent); text-decoration: none; }

	/* --- 2d. Product cards: equal height, button pinned -------------- */
	.wge-mux-archive ul.products,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		margin: 0 0 20px;
		padding: 0;
		list-style: none;
		float: none !important;
	}

	.woocommerce ul.products::before,
	.woocommerce ul.products::after { content: none !important; }

	.woocommerce ul.products li.product {
		display: flex !important;
		flex-direction: column;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 0 10px !important;
		float: none !important;
		clear: none !important;
		border: 1px solid var(--wge-line);
		overflow: hidden;
		/* the theme's 15px/6px spread shadow reads as mud once the cards are
		   two-up and bordered */
		box-shadow: none !important;
	}

	/* The sale flash is absolutely positioned at right:25px for the desktop
	   column width; that lands it well inside a half-width card. */
	.woocommerce ul.products li.product a .onsale { right: 8px !important; }

	.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;      /* eats the slack so the button lands at the bottom */
		gap: 4px;
	}

	.woocommerce ul.products li.product img {
		width: 100%;
		height: auto;
		margin: 0 0 6px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		flex: 1 1 auto;      /* two-line titles no longer shove the button down */
		padding: 0 8px;
		margin: 0;
		font-size: 13px;
		line-height: 1.25;
	}

	.woocommerce ul.products li.product .price {
		display: block;
		min-height: 2.4em;   /* reserves room for a wrapped sale price */
		padding: 0 8px;
		margin: 4px 0 0;
		font-size: 14px;
	}

	/* style.css sets `.price .woocommerce-Price-amount bdi { font-size:30px
	   !important }` for the single-product page, but it matches loop cards too:
	   at two-up that price is wider than the card it sits in. */
	.woocommerce ul.products li.product .price .woocommerce-Price-amount bdi {
		font-size: 16px !important;
	}

	.woocommerce ul.products li.product .custom-cart-btn {
		margin-top: auto;    /* the actual fix: button pinned to card bottom */
		padding: 8px 8px 0;
	}

	.woocommerce ul.products li.product .custom-cart-btn a.button,
	.woocommerce ul.products li.product a.add_to_cart_button,
	.woocommerce ul.products li.product a.button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: var(--wge-tap);
		margin: 0;
		text-align: center;
	}

	/* Hover-only affordances are dead weight on touch */
	.woocommerce ul.products li.product .hover-area { display: none !important; }

	/* --- 2e. Load more ------------------------------------------------ */
	.wge-loadmore-wrap { margin: 8px 0 16px; text-align: center; }

	/* Matches the theme's own buttons: primary colour, Bebas, square corners
	   (style.css forces border-radius:0 on every button anyway). */
	.wge-loadmore.button {
		display: block;
		width: 100%;
		min-height: 48px;
		padding: 0 16px;
		background: var(--wge-accent);
		color: #fff;
		border: 0;
		font-family: "bebas neue", var(--gbl-primary-font, inherit), sans-serif;
		font-size: 20px;
		letter-spacing: .04em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.wge-loadmore.button[disabled] {
		background: #444;
		opacity: 1;
		cursor: default;
	}

	/* --- 2f. Product page --------------------------------------------- */
	.wge-mux-product .nhff-gallery-wrapper {
		max-height: 52vh;
		overflow: hidden;
	}

	.wge-mux-product .nhff-gallery-wrapper img {
		max-height: 46vh;
		width: auto;
		max-width: 100%;
		margin-inline: auto;
		object-fit: contain;
	}

	.wge-mux-product .summary.entry-summary { padding-top: 8px; }

	.wge-mux-product .product_title.entry-title {
		font-size: 22px;
		line-height: 1.15;
		margin: 0 0 6px;
	}

	.wge-mux-product .summary > .price { margin: 0 0 10px; font-size: 22px; }

	/* Buy bar has the room now, so add breathing space at the page bottom */
	.wge-mux-product.wge-has-buybar #page {
		padding-bottom: calc(var(--wge-buybar-h) + env(safe-area-inset-bottom, 0px));
	}

	/* The theme's own floating add-to-cart bubble (`enable_popup_cart`, on by
	   default — inc/wge-woocommerce.php) is a second, worse add-to-cart in the
	   same corner: no price, no stock, and a separate code path. The buy bar
	   replaces it on mobile. */
	.wge-mux-product.wge-has-buybar .addtocart_btn { display: none !important; }

	/* (Back-to-top is lifted clear of the bar in section 1, where our own
	   button is defined. The theme's is hidden on mobile.) */
}

/* --------------------------------------------------------------------------
   3. AVAILABILITY LINE  (all viewports)
   -------------------------------------------------------------------------- */

.wge-avail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	width: 100%;
	margin: 10px 0 0;
	font-size: 14px;
}

.wge-avail__in   { color: #1a7f37; font-weight: 600; }
.wge-avail__low  { color: #b26a00; font-weight: 600; }
.wge-avail__out  { color: #b3261e; font-weight: 600; }
.wge-avail__ship { color: #555; }

.wge-avail__in::before,
.wge-avail__low::before { content: "● "; }

/* --------------------------------------------------------------------------
   4. STICKY BUY BAR  (mobile product pages)
   -------------------------------------------------------------------------- */

.wge-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--wge-line);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
	transform: translateY(110%);
	transition: transform .2s ease;
}

.wge-buybar.is-visible { transform: translateY(0); }
.wge-buybar[hidden] { display: none; }

.wge-buybar__info {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
}

.wge-buybar__price {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--wge-accent);   /* matches `.price bdi` on the page itself */
}

.wge-buybar__stock {
	display: block;
	font-size: 12px;
	color: #1a7f37;
}

.wge-buybar__btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 22px;
	background: var(--wge-accent);
	color: #fff;
	border: 0;
	border-radius: 0;   /* style.css forces `button { border-radius:0 !important }` */
	font-family: "bebas neue", var(--gbl-primary-font, inherit), sans-serif;
	font-size: 19px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.wge-buybar__btn:disabled { background: #999; }

@media (min-width: 768px) {
	.wge-buybar { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. RELOCATED SOCIAL ROW
   -------------------------------------------------------------------------- */

.wge-social-relocated {
	margin: 28px 0;
	padding: 16px 0;
	border-top: 1px solid var(--wge-line);
	text-align: center;
}

.wge-social-relocated__title {
	margin: 0 0 10px;
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wge-social-relocated .social-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.wge-social-relocated .social-links a {
	display: grid;
	place-items: center;
	min-width: var(--wge-tap);
	min-height: var(--wge-tap);
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wge-buybar,
	.wge-totop { transition: none !important; }
}

/* --------------------------------------------------------------------------
   7. SEARCH AUTOSUGGEST  (every viewport)

   Not scoped to the mobile block: the header search box is the site's only
   wayfinding at every width, since the theme's navigation markup is gone.

   The panel is positioned against the search form, which initSearchSuggest()
   gives `position:relative` if it does not already have one. z-index sits above
   the sticky header bar (9990) so the list is not clipped by it.
   -------------------------------------------------------------------------- */

.wge-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 9995;
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--wge-line, #e4e4e4);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.wge-suggest[hidden] { display: none; }

.wge-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	min-height: var(--wge-tap, 44px);
	border-bottom: 1px solid var(--wge-line, #e4e4e4);
	color: inherit;
	text-decoration: none;
}

.wge-suggest__item:last-of-type { border-bottom: 0; }

.wge-suggest__item.is-active,
.wge-suggest__item:hover,
.wge-suggest__item:focus {
	background: #f4f4f4;
}

.wge-suggest__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
}

.wge-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;   /* lets the name ellipsize instead of stretching the row */
}

.wge-suggest__name {
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wge-suggest__price {
	font-size: 13px;
	font-weight: 700;
	color: var(--wge-accent, #a12324);
}

/* The theme sizes single-product prices at 30px !important (style.css:8480);
   that rule is scoped to .price, but price_html carries the same amount spans,
   so pin the size here rather than inherit something enormous. */
.wge-suggest__price .woocommerce-Price-amount,
.wge-suggest__price bdi,
.wge-suggest__price del,
.wge-suggest__price ins {
	font-size: 13px !important;
	text-decoration: inherit;
}

.wge-suggest__price del { opacity: .6; font-weight: 400; }

.wge-suggest__empty {
	margin: 0;
	padding: 14px 12px;
	font-size: 14px;
	color: #666;
}

.wge-suggest__all {
	display: block;
	padding: 12px;
	min-height: var(--wge-tap, 44px);
	border-top: 1px solid var(--wge-line, #e4e4e4);
	background: #fafafa;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wge-accent, #a12324);
	text-decoration: none;
}

.wge-suggest__all.is-active,
.wge-suggest__all:hover,
.wge-suggest__all:focus { background: #f0f0f0; }


/* --------------------------------------------------------------------------
   8. FOLDED DESCRIPTION

   8a is the targeted fold: a <details> the PHP wrapped around the repeated
   boilerplate. 8b is the fallback height clamp for descriptions that have no
   boilerplate markers to find.

   Both keep text rendered rather than display:none — see section 8 of the JS.
   -------------------------------------------------------------------------- */

/* --- 8a. The boilerplate <details> -------------------------------------- */

.wge-fold-block {
	margin: 14px 0;
	border-top: 1px solid var(--wge-line, #e4e4e4);
	border-bottom: 1px solid var(--wge-line, #e4e4e4);
}

.wge-fold-block__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 2px;
	min-height: var(--wge-tap, 44px);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wge-accent, #a12324);
	cursor: pointer;
	list-style: none;   /* Firefox */
}

/* Safari/Chrome draw their own triangle through this pseudo-element. */
.wge-fold-block__summary::-webkit-details-marker { display: none; }

.wge-fold-block__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	margin-bottom: 3px;
}

.wge-fold-block[open] .wge-fold-block__summary::after {
	transform: rotate(-135deg);
	margin: 3px 0 0;
}

.wge-fold-block__summary:focus-visible {
	outline: 2px solid var(--wge-accent, #a12324);
	outline-offset: 2px;
}

/* Desktop keeps it open and has no reason to advertise a control. */
@media (min-width: 768px) {
	.wge-fold-block { border: 0; margin: 0; }
	.wge-fold-block__summary { display: none; }
}


/* --- 8b. Fallback height clamp ------------------------------------------ */

.wge-fold {
	position: relative;
	max-height: var(--wge-fold-max, 180px);
	overflow: hidden;
}

.wge-fold.is-open {
	max-height: none;
	overflow: visible;
}

.wge-fold::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.wge-fold.is-open::after { display: none; }

.wge-fold__btn {
	display: block;
	width: 100%;
	margin: 10px 0 18px;
	padding: 12px;
	min-height: var(--wge-tap, 44px);
	border: 1px solid var(--wge-accent, #a12324);
	border-radius: 4px;
	background: transparent;
	color: var(--wge-accent, #a12324);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}

.wge-fold__btn:hover,
.wge-fold__btn:focus {
	background: var(--wge-accent, #a12324);
	color: #fff;
}


/* --------------------------------------------------------------------------
   9. STRIPPED CHECKOUT HEADER  (every viewport)

   `.wge-mux-checkout` is set by section 9 of the PHP for checkout steps only —
   never for the order-received page, where browsing again is the goal.

   The search form itself is already replaced server-side (the badge below is
   what takes its place), so what is left here is the rest of the header's exits.
   Not scoped to the mobile block: a desktop customer can wander off just as
   easily, and the currency switcher can drop a half-filled form at any width.
   -------------------------------------------------------------------------- */

/* My Account — an exit, and a login prompt mid-purchase invites second thoughts
   on a store where guest checkout is deliberately enabled. */
.wge-mux-checkout .header-bar-right .wp-block-woocommerce-customer-account {
	display: none;
}

/* The SCI-FI / FANTASY category icons (site-header.php:94-108): two big links
   straight back into the catalogue, directly under the order form. */
.wge-mux-checkout .header-bottom {
	display: none;
}

/* Belt and braces. The PHP filter already removes the switcher, because
   wge-currency-switcher's default placement is 'header' and it appends itself to
   the same get_product_search_form filter. If WGE_CS_PLACEMENT is ever set to
   'content' it renders from a different hook instead and the filter would miss
   it — this catches that case. Switching currency mid-checkout reloads the page
   and can drop a half-filled form. */
.wge-mux-checkout .wge-cs {
	display: none;
}

.wge-secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 2px;
	color: currentColor;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wge-secure__lock {
	flex: 0 0 auto;
	opacity: .85;
}

/* The bar is a flex row built around a full-width search field; with the field
   gone the badge should sit at the end rather than stretch. */
.wge-mux-checkout .header-bar-right {
	justify-content: flex-end;
}

.wge-mux-checkout .header-bar-right > div {
	flex: 0 0 auto;
	width: auto;
}