/* ==========================================================================
   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 */
}

/* --------------------------------------------------------------------------
   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. */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 6px calc(50vw - 50%);
		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; }
}