/*
 * Customer game page + shop grid cards.
 * Palette lives in the --mwgp-* variables below (defaults: green/gold, no blue);
 * the admin "Game pages" color settings override them via an inline style, and
 * .mw-brand-{slug} classes override per brand. Derived shades use color-mix so
 * one picker recolors hover/text tones too.
 * All cover art keeps its native 600x800 (3:4 portrait) ratio — contain, never crop.
 */

:root {
	/* Mallow rework tokens (docs/design/mallow-rework/DESIGN.md, Wave 1).
	   accent = chocolate (primary action + ink), price = choc-deep (Baloo). */
	--mwgp-accent: #422623;
	--mwgp-accent-light: #E9B45C;
	--mwgp-tint: #FFF7E3;
	--mwgp-price: #2B1714;
	--mwgp-card-bg: #FFFDF6;
	--mwgp-accent-dark: color-mix(in srgb, var(--mwgp-accent) 80%, #000);
	--mwgp-tint-text: color-mix(in srgb, var(--mwgp-accent) 72%, #000);
	--mwgp-price-dark: color-mix(in srgb, var(--mwgp-price) 85%, #000);
	--mwgp-price-text: #7a4e0a;
	/* Fixed grammar colors (not admin-recolorable): teal = interactive/
	   availability, raspberry = sale/holds, caramel = toast hover accent. */
	--mwgp-teal: #2BC3D8;
	--mwgp-teal-text: #0E93A6;
	--mwgp-rasp: #D9538F;
	--mwgp-caramel: #E9B45C;
	--mwgp-dark: #0E0B09;
	--mwgp-cocoa: #241D18;
	--mwgp-card-border: #E9D6AC;
	--mwgp-r-card: 19px 23px 20px 24px;
	--mwgp-r-chip: 14px 17px 13px 18px;
	--mwgp-r-btn: 13px 16px 12px 15px;
}

/* Full-bleed dark zones use 50vw math; clip the scrollbar-width overflow
   without creating a scroll container (overflow-x: clip ≠ hidden — sticky
   descendants keep working). game-page.css loads on catalog pages only. */
html {
	overflow-x: clip;
}


/* ---------------------------------------------------------------- single page */

.mw-game-page .woocommerce-product-gallery {
	max-width: 300px;
}

/* Pull the details right up to the photo: shrink the gallery column to its
   content instead of a 50% split (block theme columns + classic float layout). */
.mw-game-page .wp-block-columns > .wp-block-column:has(.wp-block-woocommerce-product-image-gallery) {
	/* !important: the block template sets an inline flex-basis on the column. */
	flex: 0 0 320px !important;
	max-width: 340px;
}

.mw-game-page div.product > div.images {
	width: 320px;
}

.mw-game-page div.product > div.summary {
	width: calc(100% - 360px);
}

.mw-game-page .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--mwgp-card-bg);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: var(--mwgp-r-card);
	padding: 12px;
	box-sizing: border-box;
}

.mw-game-page h1,
.mw-game-page .product_title {
	font-family: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 2em;
	font-weight: 800;
	color: var(--mwgp-price);
	line-height: 1.1;
	margin-bottom: .25em;
}

.mw-gp-console-chip {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mwgp-teal-text);
	line-height: 1;
	margin-bottom: 12px;
}

/* Cross-link strip: pooled listing <-> standalone copy of the same game */
.mw-gp-crosslink {
	display: block;
	background: #DFF4F8;
	border: 1.5px solid var(--mwgp-teal);
	color: #0B7C8D;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 12px 15px 11px 14px;
	margin: 10px 0 4px;
	text-decoration: none;
}

.mw-gp-crosslink:hover {
	border-color: var(--mwgp-teal-text);
	color: #0B7C8D;
	text-decoration: underline;
}

/* Condition rows -- marshmallow cards (rework Wave 2) */
.mw-gp-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 6px;
}

.mw-gp-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--mwgp-card-bg);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 16px 19px 15px 20px;
}

.mw-gp-row-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mw-gp-row-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--mwgp-accent);
}

.mw-gp-row-stores {
	font-size: 12px;
	font-weight: 600;
	color: var(--mwgp-teal-text);
}

/* Every copy held for the floor: raspberry note + no buy button (mock). */
.mw-gp-row-instore {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mwgp-rasp);
	white-space: nowrap;
}

.mw-gp-row-price {
	text-align: right;
	white-space: nowrap;
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: var(--mwgp-price);
}

.mw-gp-row-price del {
	color: #9a9a94;
	font-size: 13px;
	font-weight: 400;
	margin-right: 4px;
}

.mw-gp-row-price ins {
	text-decoration: none;
}

.mw-gp-sale-chip {
	display: inline-block;
	background: var(--mwgp-rasp);
	color: #fff;
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 3px 9px;
	border-radius: 10px 13px 9px 12px;
	transform: rotate(-4deg);
	vertical-align: middle;
	margin-left: 4px;
}

a.button.mw-gp-add,
a.button.mw-gp-add:visited {
	background: var(--mwgp-accent);
	color: #FEE7B1;
	border: none;
	border-radius: var(--mwgp-r-btn);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 18px;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease;
}

a.button.mw-gp-add:hover {
	background: var(--mwgp-accent);
	color: #FEE7B1;
	transform: scale(1.04, .97);
	box-shadow: 0 4px 0 var(--mwgp-caramel);
}

a.button.mw-gp-add.loading {
	opacity: .6;
}

.mw-gp-row a.added_to_cart {
	font-size: 12px;
	color: var(--mwgp-accent);
	white-space: nowrap;
}

.mw-gp-oos {
	background: var(--mwgp-tint);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 16px 19px 15px 20px;
	padding: 16px;
	color: #8a6a52;
}

/* Sell-your-games banner -- graham panel, teal action (rework Wave 2) */
.mw-gp-sell-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--mwgp-dark);
	border: none;
	border-radius: 16px 19px 15px 20px;
	padding: 18px 22px;
	margin: 26px 0 8px;
}

.mw-gp-sell-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mw-gp-sell-head {
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #FEE7B1;
}

.mw-gp-sell-sub {
	font-size: 13px;
	color: #C9B48D;
}

a.mw-gp-sell-btn,
a.mw-gp-sell-btn:visited {
	background: var(--mwgp-teal);
	color: #0E2A2F;
	border-radius: var(--mwgp-r-btn);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 18px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease;
}

a.mw-gp-sell-btn:hover {
	background: var(--mwgp-teal);
	color: #0E2A2F;
	transform: scale(1.04, .97);
	box-shadow: 0 4px 0 var(--mwgp-caramel);
}

/* About section */
.mw-gp-about {
	margin: 26px 0 8px;
	border-top: 1px solid #eeeeea;
	padding-top: 20px;
}

.mw-gp-about h2 {
	font-family: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1.35em;
	font-weight: 800;
	color: var(--mwgp-price);
	margin-bottom: .6em;
}

.mw-gp-about-body {
	font-size: 15px;
	line-height: 1.65;
	color: #3d3d38;
}

/* Collapsed preview with a fade; the Show more button toggles .mw-collapsed. */
.mw-gp-about-body.mw-collapsed {
	max-height: 190px;
	overflow: hidden;
	position: relative;
}

.mw-gp-about-body.mw-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient(to bottom, rgba(255, 243, 216, 0), #FFF3D8);
}

button.mw-gp-about-toggle {
	background: none;
	border: 1px solid var(--mwgp-accent);
	color: var(--mwgp-accent);
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	margin-top: 10px;
	cursor: pointer;
}

button.mw-gp-about-toggle:hover {
	background: var(--mwgp-tint);
}

.mw-gp-about-body h2,
.mw-gp-about-body h3 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1.1em;
	font-weight: 600;
	color: #1c1c1a;
}

.mw-gp-about-body a {
	color: var(--mwgp-accent);
}

/* Related games */
.mw-gp-related {
	margin: 26px 0 8px;
	border-top: 1px solid #eeeeea;
	padding-top: 20px;
}

.mw-gp-related h2 {
	font-family: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1.35em;
	font-weight: 800;
	color: var(--mwgp-price);
	margin-bottom: .8em;
}

.mw-gp-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

a.mw-gp-mini-card,
a.mw-gp-mini-card:visited {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 16px 19px 15px 20px;
	padding: 10px;
	background: var(--mwgp-card-bg);
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

a.mw-gp-mini-card:hover {
	transform: scale(1.02, .98);
	border-color: var(--mwgp-teal-text);
	box-shadow: 0 6px 0 var(--mwgp-caramel), 0 10px 22px rgba(66, 38, 35, .13);
}

.mw-gp-mini-img img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--mwgp-tint);
	border-radius: 11px 14px 10px 13px;
}

.mw-gp-mini-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--mwgp-accent);
	line-height: 1.3;
}

.mw-gp-mini-console {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mwgp-teal-text);
}

.mw-gp-mini-price {
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--mwgp-price);
}

/* Single page mobile */
@media (max-width: 768px) {
	.mw-game-page .woocommerce-product-gallery {
		max-width: 220px;
		margin-left: auto;
		margin-right: auto;
	}

	.mw-gp-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.mw-gp-row-info {
		flex-basis: 100%;
	}

	.mw-gp-row-price {
		flex: 1;
		text-align: left;
	}

	.mw-gp-sell-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------- shop cards */

/* 5 cards per row on full-size screens (owner ask), 4 on mid desktop. */
@media (min-width: 1400px) {
	ul.wc-block-product-template:has(li.mw-owned),
	.woocommerce ul.products:has(li.product.mw-owned) {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 16px;
	}
}

@media (min-width: 1100px) and (max-width: 1399.98px) {
	ul.wc-block-product-template:has(li.mw-owned),
	.woocommerce ul.products:has(li.product.mw-owned) {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 16px;
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products:has(li.product.mw-owned) li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}
}

/* One card rule set for both grid flavours: post_class puts .mw-owned on the
   li in the classic loop AND the block Product Collection template. */
li.mw-owned {
	background: var(--mwgp-card-bg);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: var(--mwgp-r-card);
	padding: 12px !important;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
	list-style: none;
}

li.mw-owned:hover {
	transform: scale(1.02, .98);
	border-color: var(--mwgp-teal-text);
	box-shadow: 0 6px 0 var(--mwgp-caramel), 0 10px 22px rgba(66, 38, 35, .13);
}

li.mw-owned img {
	aspect-ratio: 3 / 4;
	/* !important: the WC product-image block ships object-fit: cover, which
	   crops covers that aren't exactly 3:4. Never crop or stretch cover art. */
	object-fit: contain !important;
	background: var(--mwgp-tint);
	border-radius: 13px 16px 12px 15px;
}

li.mw-owned .wp-block-post-title,
li.mw-owned .woocommerce-loop-product__title {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--mwgp-accent);
	line-height: 1.3;
	padding-bottom: 2px;
}

li.mw-owned .wp-block-post-title a {
	color: var(--mwgp-accent);
	text-decoration: none;
}

li.mw-owned .price,
li.mw-owned .wp-block-woocommerce-product-price,
li.mw-owned .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-family: 'Baloo 2', 'Inter', sans-serif;
	color: var(--mwgp-price) !important;
	font-size: 18px !important;
	font-weight: 800;
}

li.mw-owned .price del,
li.mw-owned .wp-block-woocommerce-product-price del,
li.mw-owned .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
	color: #9a9a94 !important;
	font-size: 12px !important;
	font-weight: 400;
}

li.mw-owned .price ins,
li.mw-owned .wp-block-woocommerce-product-price ins {
	text-decoration: none;
}

li.mw-owned .mw-gp-card-console {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--mwgp-teal-text);
	margin: 2px 0;
}

li.mw-owned.wc-block-product .mw-gp-card-console {
	text-align: center;
}

li.mw-owned .mw-gp-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0 4px;
}

li.mw-owned.wc-block-product .mw-gp-card-chips {
	justify-content: center;
}

li.mw-owned .mw-gp-chip {
	background: var(--mwgp-tint);
	color: var(--mwgp-tint-text);
	font-size: 11px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 4px;
}

li.mw-owned .mw-gp-chip-hv {
	background: var(--mwgp-caramel);
	color: var(--mwgp-price);
}

/* SALE blobs — raspberry, Baloo, rotated (the mock's marshmallow blob). */
li.mw-owned .onsale,
.mw-sale-badge {
	background: var(--mwgp-rasp) !important;
	color: #fff !important;
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: 1px;
	border-radius: 13px 16px 12px 15px;
	transform: rotate(-4deg);
}

/* ---------------------------------------------------------- dark browse zone */

/* The graham-black band holding the teal strip + chip bars (rework Wave 1).
   Full-bleed paint via a pseudo-element so the CONTENT keeps its constrained
   column; the seam right after it stretches edge-to-edge the same way. */
.mw-gp-dark-zone {
	position: relative;
	padding: 2px 0 12px;
	/* The theme's block gap adds top margins on the zone AND its parent
	   collection block — zero both so the dark meets the header (owner
	   report 2026-07-10: cream gap on shop/search pages). */
	margin-top: 0 !important;
}

.wp-block-woocommerce-product-collection:has(> .mw-gp-dark-zone),
.wp-block-woocommerce-product-collection:has(.mw-gp-dark-zone) {
	margin-block-start: 0 !important;
}

.mw-gp-dark-zone::before {
	content: '';
	position: absolute;
	/* 10px overbleed each side absorbs scrollbar-width asymmetry in the 50vw
	   math (html overflow-x: clip swallows it). */
	inset: 0 calc(50% - 50vw - 10px);
	background: var(--mwgp-dark);
	z-index: -1;
}

/* The teal strip spans edge-to-edge; its text stays at the content column. */
.mw-gp-dark-zone .mw-site-strip {
	margin: 0 calc(50% - 50vw - 10px) 12px;
	padding-left: max(16px, calc(50vw - 50%));
	padding-right: max(16px, calc(50vw - 50%));
}

.mw-gp-dark-zone + .mw-seam {
	/* Explicit 100vw: a plain negative-margin bleed gets width-capped by the
	   theme's max-width:100% on content children (observed dev, 2026-07-10). */
	width: calc(100vw + 20px) !important;
	max-width: calc(100vw + 20px) !important;
	margin: 0 0 0 calc(50% - 50vw - 10px);
}

/* The archive main starts with the dark zone now (crumbs/title removed) —
   close the theme's header→main gap so the dark band meets the header. */
.wp-site-blocks main:has(.mw-gp-dark-zone) {
	margin-block-start: 0;
}

/* Platform/console facet chips (buylist-style) above the shop grid. */
.mw-gp-facets {
	margin: 4px 0 10px;
}

.mw-gp-facet-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mw-gp-facet-row-sub {
	margin-top: 8px;
}

a.mw-gp-facet-chip,
a.mw-gp-facet-chip:visited {
	display: inline-block;
	background: var(--mwgp-cocoa);
	border: 1px solid #3a2f26;
	color: #EFD9AC;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--mwgp-r-chip);
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, background .12s ease;
}

a.mw-gp-facet-chip:hover {
	transform: scale(1.04, .97);
	background: #342A22;
	color: #EFD9AC;
}

a.mw-gp-facet-chip.is-active {
	background: #FEE7B1;
	border-color: #FEE7B1;
	color: var(--mwgp-accent);
	font-weight: 700;
}

/* Store chips — same cocoa base; the ACTIVE store is raspberry (mock). */
.mw-gp-facets-stores a.mw-gp-facet-chip.is-active {
	background: var(--mwgp-rasp);
	border-color: var(--mwgp-rasp);
	color: #fff;
}

/* Result count + sort, on cream right under the seam (was a template block
   row above the chips; moved per the approved mock). */
.mw-gp-resbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 0 2px;
	font-size: 13px;
	color: var(--mwgp-accent);
}

.mw-gp-resbar .woocommerce-result-count {
	margin: 0;
	opacity: .85;
}

.mw-gp-resbar .woocommerce-ordering {
	margin: 0;
}

.mw-gp-resbar .woocommerce-ordering select {
	background: var(--mwgp-card-bg);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 11px 14px 10px 13px;
	color: var(--mwgp-accent);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px;
}

/* ------------------------------------------- pa_* + price facet dropdowns */

/* Heading on the graham band of a pa_* attribute archive ("Horror games we
   have in stock") — light cream on the dark zone (mock-approved). */
.mw-gp-arc-title {
	color: #FFF3D8;
	font-family: 'Baloo 2', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.1;
	margin: 8px 0 6px;
}

/* The attribute term is tinted teal-bright against the cream heading. */
.mw-gp-arc-title .mw-gp-arc-term {
	color: var(--mwgp-teal);
}

/* Compact dropdown filter chips — CREAM controls (owner: facet controls are
   cream, distinct from the cocoa category/store nav chips). No-JS <details>. */
.mw-gp-attr-facets {
	margin: 4px 0 10px;
}

.mw-gp-facet-clear-row {
	margin-bottom: 8px;
}

.mw-gp-facet-drop {
	position: relative;
	display: inline-block;
}

.mw-gp-facet-drop-sum {
	list-style: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FEE7B1;
	border: 1px solid #F2D089;
	color: var(--mwgp-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--mwgp-r-chip);
	white-space: nowrap;
	transition: background .12s ease, transform .12s ease;
}

.mw-gp-facet-drop-sum::-webkit-details-marker {
	display: none;
}

.mw-gp-facet-drop-sum:hover {
	background: #FCDB95;
	transform: scale(1.04, .97);
}

.mw-gp-facet-drop-sum.is-active {
	background: var(--mwgp-teal);
	border-color: var(--mwgp-teal);
	color: #06333A;
}

.mw-gp-facet-drop-val {
	font-weight: 800;
}

.mw-gp-facet-caret {
	font-size: 10px;
	transition: transform .12s ease;
}

.mw-gp-facet-drop[open] .mw-gp-facet-caret {
	transform: rotate(180deg);
}

.mw-gp-facet-menu {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	min-width: 190px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--mwgp-tint);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 14px 17px 13px 18px;
	padding: 6px;
	box-shadow: 0 10px 28px rgba(14, 11, 9, .28);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

a.mw-gp-facet-opt,
a.mw-gp-facet-opt:visited {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--mwgp-accent);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

a.mw-gp-facet-opt:hover {
	background: #FBEAC4;
}

/* Desktop "Console" fast-jump menu (mobile keeps the sticky chip drill). */
.mw-gp-consolemenu {
	margin: 4px 0 6px;
}

.mw-cm {
	position: relative;
	display: inline-block;
}

.mw-cm-btn {
	list-style: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FEE7B1;
	border: 1px solid #F2D089;
	color: var(--mwgp-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--mwgp-r-chip);
	white-space: nowrap;
	transition: background .12s ease, transform .12s ease;
}

.mw-cm-btn::-webkit-details-marker {
	display: none;
}

.mw-cm-btn:hover {
	background: #FCDB95;
	transform: scale(1.04, .97);
}

.mw-cm-btn.is-active {
	background: var(--mwgp-teal);
	border-color: var(--mwgp-teal);
	color: #06333A;
}

.mw-cm-caret {
	font-size: 10px;
	transition: transform .12s ease;
}

.mw-cm[open] .mw-cm-caret {
	transform: rotate(180deg);
}

.mw-cm-panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	background: var(--mwgp-tint);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 14px 17px 13px 18px;
	box-shadow: 0 10px 28px rgba(14, 11, 9, .28);
	padding: 6px;
}

.mw-cm-brands {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 168px;
}

.mw-cm-brand {
	position: relative;
}

.mw-cm-bname {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 11px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mwgp-accent);
	cursor: default;
}

.mw-cm-brand:hover > .mw-cm-bname {
	background: #FBEAC4;
	color: var(--mwgp-rasp);
}

.mw-cm-ar {
	color: #b89a63;
	font-size: 13px;
}

.mw-cm-consoles {
	display: none;
	position: absolute;
	top: -6px;
	left: 100%;
	list-style: none;
	padding: 8px;
	background: var(--mwgp-tint);
	border: 1.5px solid var(--mwgp-card-border);
	border-radius: 14px 17px 13px 18px;
	box-shadow: 0 10px 28px rgba(14, 11, 9, .28);
	min-width: 190px;
	max-width: 300px;
	flex-wrap: wrap;
	gap: 6px;
}

/* Invisible bridge across the brand -> submenu gap so the hover survives the
   mouse crossing (the submenu is a child of the brand, so hovering the bridge
   keeps the brand hovered and the flyout open). */
.mw-cm-consoles::before {
	content: "";
	position: absolute;
	top: 0;
	left: -12px;
	width: 12px;
	height: 100%;
}

.mw-cm-brand:hover > .mw-cm-consoles,
.mw-cm-consoles:hover,
.mw-cm-brand.is-open > .mw-cm-consoles {
	display: flex;
}

a.mw-cm-console,
a.mw-cm-console:visited {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mwgp-accent);
	background: var(--mwgp-card-bg);
	border: 1px solid var(--mwgp-card-border);
	border-radius: 9px 12px 8px 11px;
	padding: 6px 11px;
	text-decoration: none;
	white-space: nowrap;
}

a.mw-cm-console:hover {
	background: #FEE7B1;
	border-color: var(--mwgp-caramel);
}

a.mw-cm-console.is-on {
	background: var(--mwgp-teal);
	border-color: var(--mwgp-teal);
	color: #06333A;
	font-weight: 700;
}

/* The Console chooser matches the other facets (caramel, dark text) but wears a
   teal outline to mark it as the way in. Full teal fill lands once a console is
   picked (via .is-active). */
.mw-gp-facet-drop--console > .mw-gp-facet-drop-sum:not(.is-active) {
	border-color: var(--mwgp-teal);
	color: var(--mwgp-teal-text);
}

/* Store facet keeps its raspberry identity when a store is picked. */
.mw-gp-facet-drop-sum.mw-gp-store-sum.is-active {
	background: var(--mwgp-rasp);
	border-color: var(--mwgp-rasp);
	color: #fff;
}

.mw-gp-facet-menu a.mw-gp-facet-opt.is-on {
	background: #FBEAC4;
	font-weight: 800;
}

/* Mobile: the Console picker joins the facet swipe lane and opens as a bottom
   sheet (like the other facet menus). Brands expand their consoles INLINE on
   tap (no hover on touch) instead of the desktop right-side flyout. */
@media (max-width: 768px) {
	.mw-cm-panel {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		max-height: 62vh;
		overflow-y: auto;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 34px rgba(14, 11, 9, .4);
		padding: 10px;
		z-index: 80;
	}

	.mw-cm-brands {
		min-width: 0;
	}

	.mw-cm-bname {
		padding: 12px;
		cursor: pointer;
	}

	.mw-cm-consoles {
		position: static;
		inset: auto;
		margin: 2px 0 8px 10px;
		background: transparent;
		border: none;
		box-shadow: none;
		min-width: 0;
		max-width: none;
	}

	.mw-cm-consoles::before {
		display: none;
	}

	/* Touch: hover pseudo-states can stick, so drive purely off .is-open (JS). */
	.mw-cm-brand:hover > .mw-cm-consoles {
		display: none;
	}

	.mw-cm-brand.is-open > .mw-cm-consoles {
		display: flex;
	}

	a.mw-cm-console {
		padding: 10px 12px;
	}
}

/* The Console + store facets replace the category drill on every device, so the
   brand/console chip sub-rows never render — just the type row (All products /
   Games / Consoles) above the single facet row, desktop and mobile alike. The
   Consoles tree gets its own Console flyout (owner liked the games one). */
.mw-gp-facets .mw-gp-facet-row-sub {
	display: none;
}

a.mw-gp-facet-opt.is-active {
	background: var(--mwgp-teal);
	color: #06333A;
}

.mw-gp-facet-opt-n {
	font-size: 11px;
	font-weight: 700;
	opacity: .55;
}

/* "Clear filters" — a distinct raspberry action chip, only shown when filtered. */
a.mw-gp-facet-clear,
a.mw-gp-facet-clear:visited {
	background: transparent;
	border: 1px solid var(--mwgp-rasp);
	color: var(--mwgp-rasp);
	font-weight: 700;
}

a.mw-gp-facet-clear:hover {
	background: var(--mwgp-rasp);
	border-color: var(--mwgp-rasp);
	color: #fff;
}

a.mw-gp-facet-opt.is-active .mw-gp-facet-opt-n {
	opacity: .85;
}

@media (max-width: 768px) {
	/* Chip bars pin to the top while scrolling the grid (owner ask): each row
	   is already a one-line swipe lane here, so the pinned block stays ~95px. */
	.mw-gp-facets-sticky {
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--mwgp-dark); /* pins inside the dark browse zone */
		padding: 6px 0 8px;
		margin: 0 -2px;
	}

	body.admin-bar .mw-gp-facets-sticky {
		top: 46px; /* WP admin bar height on mobile */
	}

	.mw-gp-facets-sticky .mw-gp-facets {
		margin: 4px 0 6px;
	}

	.mw-gp-facet-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.mw-gp-facet-row::-webkit-scrollbar {
		display: none;
	}

	/* The facet dropdowns share the older bars' single swipe lane (owner ask).
	   A scroll container clips both axes, so the OPEN menu can't be an absolute
	   popover here — it becomes a fixed bottom sheet, escaping the clip. Only
	   one is ever open (the name="mw-facet" accordion), so sheets don't stack. */
	.mw-gp-facet-drop {
		flex: 0 0 auto;
	}

	.mw-gp-facet-menu {
		position: fixed;
		inset: auto 0 0 0; /* full-width bottom sheet */
		top: auto;
		min-width: 0;
		max-height: 62vh;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 34px rgba(14, 11, 9, .4);
		padding: 10px;
		z-index: 80;
	}

	a.mw-gp-facet-opt {
		padding: 11px 12px; /* bigger tap targets on the sheet */
	}
}

/* Mobile: compact horizontal rows like the buylist app — small cover left,
   details right, one card per line. (Block-grid markup; classic themes keep
   their own mobile grid.) */
@media (max-width: 768px) {
	ul.wc-block-product-template:has(li.mw-owned) {
		display: grid;
		grid-template-columns: 1fr !important;
		gap: 10px;
	}

	li.mw-owned.wc-block-product {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-auto-rows: min-content;
		column-gap: 12px;
		row-gap: 2px;
		align-items: start;
		padding: 10px !important;
	}

	li.mw-owned.wc-block-product .wc-block-components-product-image,
	li.mw-owned.wc-block-product .wp-block-woocommerce-product-image {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0;
	}

	li.mw-owned.wc-block-product .wp-block-post-title,
	li.mw-owned.wc-block-product .mw-gp-card-console,
	li.mw-owned.wc-block-product .mw-gp-card-chips,
	li.mw-owned.wc-block-product .wp-block-woocommerce-product-price {
		grid-column: 2;
		text-align: left !important;
		margin: 0;
	}

	li.mw-owned.wc-block-product .wp-block-post-title {
		font-size: 14px !important;
	}

	li.mw-owned.wc-block-product .mw-gp-card-console {
		text-align: left;
	}

	li.mw-owned.wc-block-product .mw-gp-card-chips {
		justify-content: flex-start;
		margin: 4px 0;
	}

	li.mw-owned.wc-block-product .onsale,
	li.mw-owned.wc-block-product .mw-sale-badge {
		grid-column: 2;
		justify-self: start;
		width: auto;
		margin: 0 0 2px;
	}
}

/* Hold-last-copy (outline §4): a condition whose copies are all kept on the
   store floor sells in person only — the label replaces price + Add button. */
.mw-gp-row-instore {
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--mwgp-tint-text);
	white-space: nowrap;
}

/* Rework Wave 1: no squish transforms for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	li.mw-owned,
	a.mw-gp-facet-chip {
		transition: none;
	}

	li.mw-owned:hover,
	a.mw-gp-facet-chip:hover {
		transform: none;
	}
}

/* ---------------------------------------------------- single-page dark zone */

/* Rework Wave 2: the game page dark top zone (strip + crumbs + seam). The
   template breadcrumb block is replaced by the in-zone crumbs. */
.single-product .wp-block-breadcrumbs {
	display: none;
}

.mw-gp-dark-zone--single {
	padding: 2px 0 10px;
	margin-bottom: 0;
}

.mw-gp-crumbs .woocommerce-breadcrumb,
.mw-gp-crumbs {
	font-size: 13px;
	color: #C9B48D;
	margin: 0;
}

.mw-gp-crumbs a {
	color: var(--mwgp-teal);
	text-decoration: none;
}

.mw-gp-crumbs a:hover {
	text-decoration: underline;
}

/* Sale-promo banner card (classes replace the old green inline styles). */
.mw-gp-promo {
	background: #FEE7B1;
	border: 1.5px solid var(--mwgp-caramel);
	border-radius: var(--mwgp-r-chip);
	color: var(--mwgp-accent);
	font-weight: 600;
	margin-top: 16px;
}

.mw-gp-promo-chip {
	display: inline-block;
	background: var(--mwgp-rasp);
	color: #fff;
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: 1px;
	border-radius: 11px;
	transform: rotate(-4deg);
}

/* Single page: the product wrapper is a direct wp-site-blocks child (no
   <main>) — close its header gap so the dark zone meets the header. */
.wp-site-blocks > .woocommerce.product:has(.mw-gp-dark-zone--single) {
	margin-block-start: 0 !important;
}

/* The grouped "From $X" line under the title. */
.mw-game-page .wp-block-woocommerce-product-price,
.mw-game-page .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-family: 'Baloo 2', 'Inter', sans-serif;
	font-weight: 800;
	color: var(--mwgp-price);
}

/* Endless-scroll sentinel: three toasting dots while the next page loads. */
.mw-gp-infinite {
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 22px 0 30px;
	min-height: 18px;
}

.mw-gp-infinite-dot {
	width: 10px;
	height: 10px;
	border-radius: 4px 6px 3px 5px;
	background: var(--mwgp-caramel);
	opacity: .35;
}

.mw-gp-infinite.is-loading .mw-gp-infinite-dot {
	animation: mwgpDotPulse 0.9s ease-in-out infinite;
}

.mw-gp-infinite.is-loading .mw-gp-infinite-dot:nth-child(2) { animation-delay: .15s; }
.mw-gp-infinite.is-loading .mw-gp-infinite-dot:nth-child(3) { animation-delay: .3s; }

@keyframes mwgpDotPulse {
	0%, 100% { opacity: .35; transform: none; }
	50%      { opacity: 1; transform: scale(1.25, .9); }
}

@media (prefers-reduced-motion: reduce) {
	.mw-gp-infinite.is-loading .mw-gp-infinite-dot { animation: none; opacity: .8; }
}

/* The pickup/shipping meta line under the condition rows (mock 1). */
.mw-gp-meta-line {
	font-size: 13px;
	color: #6b503e;
	margin: 12px 0 0;
	line-height: 1.7;
}

.mw-gp-meta-line b {
	color: var(--mwgp-teal-text);
	font-weight: 700;
}

.mw-gp-meta-dot {
	color: #C9A96E;
	margin: 0 3px;
}

/* IGDB facts panel (Phase A) — s'mores palette, 2-column */
.mw-gp-facts{margin:28px auto;max-width:920px;background:linear-gradient(180deg,var(--mwgp-card-bg),var(--mwgp-tint));border:1px solid var(--mwgp-card-border);border-radius:var(--mwgp-r-card);padding:22px 26px;box-shadow:0 8px 22px rgba(66,38,35,.08)}
.mw-gp-facts>h2{margin:0 0 16px;font-family:'Baloo 2',sans-serif;color:var(--mwgp-accent);font-size:22px}
.mw-gp-facts__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.mw-gp-facts__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:5px 0;border-bottom:1px dashed color-mix(in srgb,var(--mwgp-card-border) 80%,transparent)}
.mw-gp-facts__label{flex:0 0 110px;font-weight:800;color:var(--mwgp-accent);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.mw-gp-facts__val{color:var(--mwgp-price);font-size:15px;font-weight:600}
.mw-gp-facts__chips{display:flex;flex-wrap:wrap;gap:6px}
.mw-gp-facts__chip{display:inline-block;background:#fff;color:var(--mwgp-tint-text);border:1px solid var(--mwgp-card-border);border-radius:var(--mwgp-r-chip);padding:3px 12px;font-size:13px;font-weight:700}
a.mw-gp-facts__chip--link{color:var(--mwgp-teal-text);border-color:var(--mwgp-teal);text-decoration:none;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
a.mw-gp-facts__chip--link:hover,a.mw-gp-facts__chip--link:focus-visible{background:var(--mwgp-teal-text);color:#fff;border-color:var(--mwgp-teal-text)}
/* Ratings — player, critic, ESRB together on one row below the grid */
.mw-gp-facts__ratings{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 26px;margin-top:16px;padding-top:16px;border-top:1px solid var(--mwgp-card-border)}
.mw-gp-facts__ratingcell{display:flex;flex-direction:column;gap:5px}
.mw-gp-facts__ratingcap{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mwgp-tint-text)}
.mw-gp-facts__rating{display:inline-flex;align-items:baseline;gap:2px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;line-height:1;color:#fff;padding:7px 16px;border-radius:14px 17px 13px 16px;box-shadow:0 4px 12px rgba(66,38,35,.18)}
.mw-gp-facts__rating small{font-size:13px;font-weight:700;opacity:.9}
.mw-gp-facts__rating--player{background:linear-gradient(120deg,var(--mwgp-teal-text),var(--mwgp-teal))}
.mw-gp-facts__rating--critic{background:linear-gradient(120deg,#c9922f,var(--mwgp-caramel))}
.mw-gp-facts__esrb{display:inline-flex;align-items:center;gap:8px;background:var(--mwgp-dark);color:#FFF3D8;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;padding:6px 14px;border-radius:12px 15px 11px 14px}
.mw-gp-facts__esrb strong{font-size:19px;font-weight:800}
.mw-gp-facts__credit{margin:16px 0 0;text-align:right;font-size:11px;line-height:1}
.mw-gp-facts__credit a{color:#9a8d78;text-decoration:none}
.mw-gp-facts__credit a:hover{text-decoration:underline}
@media(max-width:560px){.mw-gp-facts__grid{grid-template-columns:1fr}.mw-gp-facts__label{flex-basis:100%}}