/* Most Wanted Buylist -- customer (bright theme). Scoped under #mw-buylist-app.
   Filled in Tasks 2 (hero/grid/cards) and 3 (sidebar/cart). */

/* ------------------------------------------------------------------ */
/* Custom properties                                                    */
/* ------------------------------------------------------------------ */
#mw-buylist-app {
	--mwb-green:      #99BF68;
	--mwb-green-dark: #4f7a2b;  /* deeper: AA-safe white button text + reads "trust" */
	--mwb-ink:        #16200d;
	--mwb-gold:       #c8902a;  /* MONEY ONLY — prices + estimated total */
	--mwb-app-bg:     #18210f;  /* dark base layer behind the white cards */
	--mwb-grey-light: #f3f6ef;
	--mwb-grey-mid:   #e0e6d8;
	--mwb-grey-text:  #586647;  /* darkened from #6b7a5a for WCAG AA on white */
	--mwb-on-dark:    #e7edda;  /* light text used directly on the dark base */
	--mwb-white:      #ffffff;
	--mwb-radius:     12px;
	--mwb-shadow:     0 2px 12px rgba(0,0,0,0.28);
	--mwb-border:     1px solid #cfd9bf;

	box-sizing:  border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color:       var(--mwb-ink);
	background:  var(--mwb-app-bg);

	width:       100%;
	max-width:   1760px;   /* roomy: large screens fit 4-5 product columns */
	margin-left: auto;
	margin-right: auto;
	padding:     20px;
}

/* Headings ship with the plugin (Sora) so type is identical across host themes */
#mw-buylist-app .mwb-facets-wrap h3,
#mw-buylist-app .mwb-empty-title {
	font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* On roomy screens, break out of an over-narrow theme content column so the
   grid + sidebar have space to lay out two-up. Works when the theme content
   column is horizontally centered (the common case); harmless inside a
   full-width section (e.g. Divi), where the parent is already full width. */
@media ( min-width: 1024px ) {
	#mw-buylist-app {
		position:  relative;
		left:      50%;
		transform: translateX( -50% );
		width:     96vw;
		max-width: 1760px;
	}
}

#mw-buylist-app *,
#mw-buylist-app *::before,
#mw-buylist-app *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------ */
/* Notice (login / not-live gates)                                      */
/* ------------------------------------------------------------------ */
.mw-buylist-notice {
	padding:       16px;
	background:    #f3f6ef;
	border:        1px solid #99BF68; /* literal: this notice renders OUTSIDE #mw-buylist-app, so no CSS vars */
	border-radius: 8px;
	color:         #2a3a18;
}

/* The logged-out "Sign in" link = a house-green button (owner ask 2026-07-07). */
.mw-buylist-notice .mw-buylist-login {
	display:         inline-block;
	margin-left:     10px;
	padding:         8px 22px;
	background:      #4f7a2b; /* the app's --mwb-green-dark: AA-safe white text */
	color:           #fff;
	font-weight:     700;
	border-radius:   8px;
	text-decoration: none;
}
.mw-buylist-notice .mw-buylist-login:hover {
	background: #3f6222;
	color:      #fff;
}

/* ------------------------------------------------------------------ */
/* Hero (coded, exciting) — dark glow panel; an admin image can override  */
/* it on desktop while the coded hero still serves mobile.                */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-hero {
	position:      relative;
	border-radius: var(--mwb-radius);
	box-shadow:    var(--mwb-shadow);
	margin-bottom: 20px;
	overflow:      hidden;
}

#mw-buylist-app .mwb-hero-img {
	display: block;
	width:   100%;
	height:  auto;
}

/* Hybrid: with an admin image, show the image on desktop, coded on mobile. */
@media ( min-width: 769px ) {
	#mw-buylist-app .mwb-hero--has-image .mwb-hero-coded { display: none; }
}
@media ( max-width: 768px ) {
	#mw-buylist-app .mwb-hero--has-image .mwb-hero-img { display: none; }
}

/* -- The coded hero panel -- */
#mw-buylist-app .mwb-hero-coded {
	position:      relative;
	overflow:      hidden;
	padding:       32px 24px 28px;
	text-align:    center;
	border-radius: var(--mwb-radius);
	border:        1px solid #3c5d23;
	background:
		radial-gradient( 120% 150% at 50% -25%, rgba(153,191,104,0.20), transparent 60% ),
		linear-gradient( 165deg, #1f3014 0%, #0e150a 72% );
}

/* Twinkling starfield */
#mw-buylist-app .mwb-hero-sparkles {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	background-image:
		radial-gradient( 1.5px 1.5px at 10% 28%, rgba(153,191,104,0.95), transparent ),
		radial-gradient( 1.5px 1.5px at 88% 22%, rgba(255,255,255,0.85), transparent ),
		radial-gradient( 2px 2px   at 22% 72%, rgba(153,191,104,0.8), transparent ),
		radial-gradient( 1.5px 1.5px at 75% 78%, rgba(255,255,255,0.7), transparent ),
		radial-gradient( 1.5px 1.5px at 50% 12%, rgba(153,191,104,0.7), transparent ),
		radial-gradient( 1.5px 1.5px at 64% 48%, rgba(255,255,255,0.6), transparent ),
		radial-gradient( 2px 2px   at 33% 40%, rgba(153,191,104,0.6), transparent ),
		radial-gradient( 1.5px 1.5px at 92% 60%, rgba(153,191,104,0.7), transparent );
	animation: mwbTwinkle 4s ease-in-out infinite;
}

@keyframes mwbTwinkle {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* Headline: bold italic uppercase, "Get Cash." glows green */
#mw-buylist-app .mwb-hero-headline {
	position:       relative;
	z-index:        1;
	margin:         0 0 18px;
	font-family:    'Sora', sans-serif;
	font-weight:    800;
	font-style:     italic;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height:    1.04;
	font-size:      clamp( 1.7rem, 4.6vw, 2.8rem );
}

#mw-buylist-app .mwb-hl-1 { color: #ffffff; }
#mw-buylist-app .mwb-hl-2 {
	color:       var(--mwb-green);
	text-shadow: 0 0 18px rgba(153,191,104,0.55);
}

/* Steps on the dark panel */
#mw-buylist-app .mwb-steps {
	position:       relative;
	z-index:        1;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            16px;
	margin:         0;
	padding:        0;
}

#mw-buylist-app .mwb-steps-group {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             14px 28px;
}

#mw-buylist-app .mwb-step {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex:        0 1 auto;
	min-width:   175px;
	text-align:  left;
}

#mw-buylist-app .mwb-step-num {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           30px;
	height:          30px;
	border-radius:   50%;
	background:      var(--mwb-green);
	color:           var(--mwb-ink);
	font-size:       0.9rem;
	font-weight:     800;
	flex-shrink:     0;
	box-shadow:      0 0 12px rgba(153,191,104,0.5);
}

#mw-buylist-app .mwb-step-text {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

#mw-buylist-app .mwb-step-text strong {
	color:       #ffffff;
	font-weight: 700;
	font-size:   0.92rem;
}

#mw-buylist-app .mwb-step-text span {
	color:       #b9c8a4;
	font-size:   0.8rem;
	line-height: 1.3;
}

/* Glowing "GET MORE WITH STORE CREDIT" badge */
#mw-buylist-app .mwb-trades-badge {
	position:       relative;
	z-index:        1;
	display:        inline-block;
	margin-top:     22px;
	padding:        12px 30px;
	border:         2px solid var(--mwb-green);
	border-radius:  10px;
	background:     rgba(0,0,0,0.35);
	animation:      mwbBadgePulse 2.8s ease-in-out infinite;
}

@keyframes mwbBadgePulse {
	0%, 100% { box-shadow: 0 0 16px rgba(153,191,104,0.28), inset 0 0 14px rgba(153,191,104,0.10); }
	50%      { box-shadow: 0 0 30px rgba(153,191,104,0.55), inset 0 0 20px rgba(153,191,104,0.18); }
}

#mw-buylist-app .mwb-trades-badge strong {
	display:        block;
	font-family:    'Sora', sans-serif;
	font-weight:    800;
	font-style:     italic;
	text-transform: uppercase;
	font-size:      clamp( 1rem, 2.6vw, 1.5rem );
	color:          #ffffff;
	line-height:    1.1;
}

#mw-buylist-app .mwb-tb-hl {
	color:       var(--mwb-gold);
	text-shadow: 0 0 14px rgba(200,144,42,0.55);
}

#mw-buylist-app .mwb-trades-badge span {
	display:    block;
	margin-top: 5px;
	font-size:  0.85rem;
	font-style: italic;
	color:      #c9d6b6;
}

@media ( prefers-reduced-motion: reduce ) {
	#mw-buylist-app .mwb-hero-sparkles,
	#mw-buylist-app .mwb-trades-badge { animation: none; }
}

/* "How to grade your games" link — sits on the dark base between the two
   sidebar cards, so the text is light green for contrast. */
#mw-buylist-app .mwb-grading {
	margin:     12px 0;
	padding:    0;
	text-align: center;
}

#mw-buylist-app .mwb-grading-link {
	color:           var(--mwb-green);
	font-weight:     600;
	font-size:       0.85rem;
	text-decoration: none;
}

#mw-buylist-app .mwb-grading-link:hover {
	text-decoration: underline;
}


/* ------------------------------------------------------------------ */
/* Body layout                                                          */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-body {
	display:     flex;
	gap:         20px;
	align-items: flex-start;
}

/* Left rail: the category ("Choose a system") list. Pinned so it stays in view
   while the results scroll. */
#mw-buylist-app .mwb-catrail {
	width:      210px;
	flex:       0 0 210px;
	position:   sticky;
	top:        16px;
}

#mw-buylist-app .mwb-main {
	flex:     1 1 0;
	min-width: 0;
}

/* Right rail: the buylist. Pinned, and collapsible to a slim reopen tab. */
#mw-buylist-app .mwb-cartrail {
	width:      300px;
	flex:       0 0 300px;
	position:   sticky;
	top:        16px;
}

@media ( max-width: 768px ) {
	#mw-buylist-app .mwb-body {
		flex-direction: column;
		align-items:    stretch;   /* full-width cards (the body is flex-start on desktop) */
	}

	/* Rails are not pinned on mobile -- everything stacks in one column. */
	#mw-buylist-app .mwb-catrail,
	#mw-buylist-app .mwb-cartrail,
	#mw-buylist-app .mwb-cartrail.is-collapsed {
		position: static;
		width:    auto;
		flex:     0 0 auto;
	}

	/* Flatten the catrail + main wrappers so their children interleave into one
	   column, in the explicit mobile order:
	   1 search -> 2 platform -> 3 grading -> 4 results -> 5 buylist. */
	#mw-buylist-app .mwb-catrail,
	#mw-buylist-app .mwb-main { display: contents; }

	#mw-buylist-app .mwb-searchbar   { order: 1; }
	#mw-buylist-app .mwb-facets-wrap { order: 2; }
	#mw-buylist-app .mwb-grading     { order: 3; }
	#mw-buylist-app .mwb-empty       { order: 4; }
	#mw-buylist-app .mwb-grid        { order: 4; }
	#mw-buylist-app .mwb-cartrail    { order: 5; }
	#mw-buylist-app .mwb-cart-wrap   { margin-top: 0; }

	/* Collapsed buylist on mobile = a full-width horizontal bar (the base reopen
	   style) that sticks to the bottom of the viewport so the running total stays
	   visible; tapping it expands the full buylist. */
	#mw-buylist-app .mwb-cartrail.is-collapsed {
		position: sticky;
		bottom:   0;
		z-index:  20;
	}
}

/* ------------------------------------------------------------------ */
/* Payout toggle pill                                                   */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-payout-toggle {
	display:       flex;
	width:         100%;
	background:    var(--mwb-grey-mid);
	border-radius: 999px;
	padding:       3px;
	margin-bottom: 16px;
	gap:           0;
}

#mw-buylist-app .mwb-pay {
	flex:          1 1 0;
	min-width:     0;
	border:        none;
	background:    transparent;
	border-radius: 999px;
	padding:       7px 12px;
	font-size:     0.9rem;
	font-weight:   600;
	cursor:        pointer;
	color:         var(--mwb-grey-text);
	transition:    background 0.15s, color 0.15s;
	line-height:   1;
	text-align:    center;
}

#mw-buylist-app .mwb-pay.is-active {
	background: var(--mwb-green);
	color:      var(--mwb-ink);
}

#mw-buylist-app .mwb-pay:hover:not(.is-active) {
	background: #d2e0c0;
	color:      var(--mwb-ink);
}

/* ------------------------------------------------------------------ */
/* Search bar (full-width, its own row above the body)                  */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-searchbar {
	margin-bottom: 20px;
}

#mw-buylist-app .mwb-search {
	display:       block;
	width:         100%;
	padding:       13px 18px;
	border:        var(--mwb-border);
	border-radius: 10px;
	font-size:     1.05rem;
	color:         var(--mwb-ink);
	background:    var(--mwb-white);
	box-shadow:    var(--mwb-shadow);
	margin:        0;
	outline:       none;
}

#mw-buylist-app .mwb-search:focus {
	border-color: var(--mwb-green);
	box-shadow:   0 0 0 3px rgba(153,191,104,0.2);
}

/* "Currently Searching: X" line under the search bar (sits on the dark base) */
#mw-buylist-app .mwb-current-cat {
	margin:      8px 0 0;
	padding:     0;
	font-size:   0.9rem;
	font-weight: 600;
	color:       var(--mwb-green);
	text-align:  left;
}

/* ------------------------------------------------------------------ */
/* Pre-search empty state (lives on the dark base, so text is light)    */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	min-height:      340px;
	padding:         40px 20px;
}

#mw-buylist-app .mwb-empty-icon {
	display:       block;
	margin-bottom: 12px;
	color:         var(--mwb-green);
	opacity:       0.95;
}

#mw-buylist-app .mwb-empty-title {
	font-size:   1.2rem;
	font-weight: 700;
	color:       var(--mwb-white);
	margin:      0 0 6px;
}

#mw-buylist-app .mwb-empty-sub {
	font-size:  0.9rem;
	color:      var(--mwb-on-dark);
	margin:     0 0 16px;
	max-width:  420px;
}

#mw-buylist-app .mwb-empty .mwb-grading-link {
	color: var(--mwb-green);
}

/* ------------------------------------------------------------------ */
/* Card grid                                                            */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap:                   20px;
}

/* No-results message (on the dark base) */
#mw-buylist-app .mwb-no-results {
	color:     var(--mwb-on-dark);
	font-size: 0.95rem;
	margin:    0;
	padding:   20px 0;
}

/* ------------------------------------------------------------------ */
/* Card                                                                 */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-card {
	background:    var(--mwb-white);
	border:        var(--mwb-border);
	border-radius: var(--mwb-radius);
	box-shadow:    var(--mwb-shadow);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
}

/* -- Console badge bar -- */
#mw-buylist-app .mwb-badge {
	padding:     6px 12px;
	font-size:   0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:       var(--mwb-white);
	background:  #888;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

/* Platform brand colors */
#mw-buylist-app .mwb-badge[data-console="playstation"] {
	background: #003087;
}
#mw-buylist-app .mwb-badge[data-console="xbox"] {
	background: #107C10;
}
#mw-buylist-app .mwb-badge[data-console="nintendo"] {
	background: #C0392B;
}
#mw-buylist-app .mwb-badge[data-console="sega"] {
	background: #1a4e8c;
}
#mw-buylist-app .mwb-badge[data-console="default"] {
	background: #6b7a8a;
}

/* -- Cover image (portrait box art) -- */
#mw-buylist-app .mwb-cover {
	background:   #ffffff;   /* white tile so transparent covers read clean + consistent */
	aspect-ratio: 3 / 4;
	overflow:     hidden;
}

#mw-buylist-app .mwb-cover-img {
	width:       100%;
	height:      100%;
	/* cover: the conversion tool pre-frames covers to 3:4, so cover fills exactly
	   with no crop (transparent margins show the white tile). For any not-yet-framed
	   source, cover still fills nicely instead of letterboxing. */
	object-fit:  cover;
	display:     block;
}

#mw-buylist-app .mwb-cover span {
	font-size:   0.8rem;
	color:       var(--mwb-grey-text);
	text-align:  center;
	font-weight: 500;
	word-break:  break-word;
}

/* -- Card info -- */
#mw-buylist-app .mwb-card-info {
	padding: 10px 14px 2px;
}

#mw-buylist-app .mwb-card-title {
	font-size:   0.95rem;
	font-weight: 700;
	color:       var(--mwb-ink);
	margin:      0 0 2px;
	line-height: 1.3;
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}

#mw-buylist-app .mwb-card-console {
	font-size: 0.8rem;
	color:     var(--mwb-grey-text);
	margin:    0;
}

/* -- Selects (stacked: completeness over grade, then qty + price row) --
   min-height reserves space equal to dropdown(~30px) + grade(~30px) + gap(6px)
   so dropdown/tickbox/none cards stay equal-height in the grid. */
#mw-buylist-app .mwb-selects {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	padding:        8px 14px 10px;
	min-height:     106px;   /* 30px sel + 6px gap + 30px sel + 6px gap + 34px qty-price row */
}

#mw-buylist-app .mwb-sel {
	width:         100%;
	min-width:     0;
	padding:       7px 10px;
	border:        1px solid var(--mwb-grey-mid);
	border-radius: 6px;
	font-size:     0.85rem;
	color:         var(--mwb-ink);
	background:    var(--mwb-white);
	cursor:        pointer;
	appearance:    auto;
}

/* -- Tickbox condition mode (.mwb-ticks block replaces the completeness select) -- */
#mw-buylist-app .mwb-ticks {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

#mw-buylist-app .mwb-tick-label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--mwb-ink);
	cursor:      pointer;
	user-select: none;
}

#mw-buylist-app .mwb-tick-cb {
	width:  14px;
	height: 14px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--mwb-green-dark);
	cursor: pointer;
}

#mw-buylist-app .mwb-tick-cb:disabled {
	opacity: 0.4;
	cursor:  not-allowed;
}
#mw-buylist-app .mwb-tick-cb:disabled + span {
	opacity: 0.4;
}

/* -- None condition mode: "Price is for a {label} copy." note -- */
#mw-buylist-app .mwb-cond-note {
	margin:      0;
	font-size:   0.78rem;
	font-weight: 500;
	color:       var(--mwb-grey-text);
	line-height: 1.4;
}

/* -- Qty (left) + price (right) on one row -- */
#mw-buylist-app .mwb-qty-price {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	margin-top:      2px;
}

#mw-buylist-app .mwb-qty-row {
	display:     flex;
	align-items: center;
	gap:         6px;
	flex-shrink: 0;
}

#mw-buylist-app .mwb-qty-row label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   0.85rem;
	font-weight: 600;
	color:       var(--mwb-grey-text);
}

#mw-buylist-app .mwb-qty {
	width:         54px;
	padding:       6px 8px;
	border:        1px solid var(--mwb-grey-mid);
	border-radius: 6px;
	font-size:     0.85rem;
	text-align:    center;
	color:         var(--mwb-ink);
	background:    var(--mwb-white);
}

#mw-buylist-app .mwb-qty:focus,
#mw-buylist-app .mwb-sel:focus {
	outline:      none;
	border-color: var(--mwb-green);
	box-shadow:   0 0 0 2px rgba(153,191,104,0.25);
}

/* -- Price display (right of qty) -- GOLD = money -- */
#mw-buylist-app .mwb-price {
	flex:        1 1 auto;
	min-width:   0;
	text-align:  right;
	font-size:   1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color:       var(--mwb-gold);
	font-variant-numeric: tabular-nums;
}

#mw-buylist-app .mwb-price--no-offer,
#mw-buylist-app .mwb-price--prompt {
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--mwb-grey-text);
}

/* Price column: big active amount + small "or $X in [other payout]" line */
#mw-buylist-app .mwb-price-wrap {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
}

#mw-buylist-app .mwb-price-alt {
	margin-top:  1px;
	font-size:   0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-align:  right;
	color:       var(--mwb-grey-text);
}

#mw-buylist-app .mwb-price-alt.is-credit {
	color: var(--mwb-green-dark);
}

/* -- Add button -- */
#mw-buylist-app .mwb-add-btn {
	display:       block;
	width:         calc( 100% - 28px );
	margin:        2px 14px 12px;
	padding:       9px 14px;
	background:    var(--mwb-green-dark);
	color:         var(--mwb-white);
	border:        none;
	border-radius: 8px;
	font-size:     0.9rem;
	font-weight:   700;
	cursor:        pointer;
	transition:    background 0.15s, opacity 0.15s;
}

#mw-buylist-app .mwb-add-btn:hover:not(:disabled) {
	background: #4a6e28;
}

#mw-buylist-app .mwb-add-btn:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

/* ------------------------------------------------------------------ */
/* Facets / sidebar scaffolding (Task 3 fills the rest)                */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-facets-wrap h3,
#mw-buylist-app .mwb-cart-wrap h3 {
	font-size:     0.95rem;
	font-weight:   700;
	color:         var(--mwb-ink);
	margin:        0 0 10px;
}

/* Collapsed rail: the card is hidden and the reopen button takes over. On
   desktop the rail also shrinks to a slim tab so the grid widens (see the
   min-width:769px block); on mobile it stays full-width as a bottom bar. */
#mw-buylist-app .mwb-cartrail.is-collapsed .mwb-cart-wrap { display: none; }

#mw-buylist-app .mwb-cart-wrap {
	background:     var(--mwb-white);
	border:         var(--mwb-border);
	border-radius:  var(--mwb-radius);
	box-shadow:     var(--mwb-shadow);
	padding:        16px;
	display:        flex;
	flex-direction: column;
}

/* Header row: "Your Buylist (n)" label + the Hide (collapse) button */
#mw-buylist-app .mwb-cart-head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	margin:          0 0 10px;
	flex-shrink:     0;
}

#mw-buylist-app .mwb-cart-toggle-label {
	font-family: 'Sora', 'Inter', sans-serif;
	font-size:   0.95rem;
	font-weight: 700;
	color:       var(--mwb-ink);
}

#mw-buylist-app .mwb-cart-collapse {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       4px 9px;
	background:    #f4f7ee;
	border:        var(--mwb-border);
	border-radius: 6px;
	cursor:        pointer;
	font-size:     0.78rem;
	font-weight:   600;
	color:         var(--mwb-grey-text);
	transition:    background 0.15s, color 0.15s;
}
#mw-buylist-app .mwb-cart-collapse:hover {
	background: var(--mwb-green);
	color:      var(--mwb-ink);
}

/* Collapse chevron points toward the edge (retract) */
#mw-buylist-app .mwb-collapse-chevron {
	width:         0;
	height:        0;
	border-top:    4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left:   6px solid currentColor;
}

/* Total + Submit now sit at the TOP of the buylist card (pinned, so they don't
   get lost at the bottom of a long list). Divider separates them from the rest. */
#mw-buylist-app .mwb-cart-foot {
	flex-shrink:   0;
	margin:        0 0 12px;
	padding-bottom: 12px;
	border-bottom: var(--mwb-border);
}

/* Pinned (non-scrolling) part of the buylist card */
#mw-buylist-app .mwb-cart-wrap > .mwb-payout-toggle {
	flex-shrink: 0;
}

/* Reopen button shown when the buylist is collapsed. Base = the full-width
   horizontal bar (mobile); the desktop slim vertical tab overrides are in the
   min-width:769px block below. */
#mw-buylist-app .mwb-cart-reopen {
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	justify-content: center;
	gap:             14px;
	width:           100%;
	padding:         14px;
	background:      var(--mwb-green);
	border:          none;
	border-radius:   var(--mwb-radius);
	box-shadow:      var(--mwb-shadow);
	cursor:          pointer;
	color:           var(--mwb-ink);
	font-family:     'Sora', 'Inter', sans-serif;
	transition:      background 0.15s, color 0.15s;
}
#mw-buylist-app .mwb-cart-reopen:hover {
	background: var(--mwb-green-dark);
	color:      var(--mwb-white);
}
/* Chevron points up (expand) on the horizontal bar */
#mw-buylist-app .mwb-reopen-chevron {
	width:         0;
	height:        0;
	border-left:   5px solid transparent;
	border-right:  5px solid transparent;
	border-bottom: 6px solid currentColor;
}
#mw-buylist-app .mwb-reopen-text {
	font-size:   0.95rem;
	font-weight: 700;
}
#mw-buylist-app .mwb-reopen-total {
	font-size:   0.95rem;
	font-weight: 600;
}

/* Total alt: the other payout, with the active mode named explicitly */
#mw-buylist-app .mwb-total-alt {
	margin:      0 0 8px;
	font-size:   0.78rem;
	font-weight: 600;
	color:       var(--mwb-grey-text);
}

#mw-buylist-app .mwb-total-alt.is-credit {
	color: var(--mwb-green-dark);
}

#mw-buylist-app .mwb-total {
	font-size:   0.95rem;
	color:       var(--mwb-grey-text);
	margin-bottom: 8px;
}

#mw-buylist-app .mwb-total strong {
	color:       var(--mwb-ink);
	font-weight: 700;
}

#mw-buylist-app .mwb-submit {
	display:       block;
	width:         100%;
	padding:       11px;
	background:    var(--mwb-green);
	color:         var(--mwb-ink);
	border:        none;
	border-radius: 8px;
	font-size:     0.95rem;
	font-weight:   700;
	cursor:        pointer;
	margin-top:    8px;
	transition:    background 0.15s, opacity 0.15s;
}

#mw-buylist-app .mwb-submit:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

#mw-buylist-app .mwb-submit:hover:not(:disabled) {
	background: var(--mwb-green-dark);
	color:      var(--mwb-white);
}

#mw-buylist-app .mwb-min-hint {
	font-size: 0.78rem;
	color:     var(--mwb-grey-text);
	margin:    4px 0 0;
}

/* ------------------------------------------------------------------ */
/* Sidebar panel                                                        */
/* ------------------------------------------------------------------ */
@media ( min-width: 769px ) {
	/* Platform card stays compact: the facet list scrolls INSIDE it (shows all
	   parent systems on arrival; scrolls only once a brand is expanded). */
	#mw-buylist-app .mwb-facets {
		max-height: 320px;
		overflow-y: auto;
	}

	/* Pinned rail: cap the buylist card to the viewport. The header, Total +
	   Submit, and payout toggle stay put while the item list scrolls inside the
	   card -- so Submit is always reachable on a long buylist. */
	#mw-buylist-app .mwb-cart-wrap {
		max-height: calc( 100vh - 32px );
	}
	#mw-buylist-app .mwb-cart {
		flex:       1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	/* Collapsed on desktop: the rail shrinks to a slim vertical tab so the center
	   widens and the grid (auto-fill minmax) returns more games. */
	#mw-buylist-app .mwb-cartrail.is-collapsed {
		width: 46px;
		flex:  0 0 46px;
	}
	#mw-buylist-app .mwb-cart-reopen {
		flex-direction: column;
		gap:            10px;
		padding:        14px 4px;
	}
	#mw-buylist-app .mwb-reopen-text {
		writing-mode: vertical-rl;
		font-size:    0.82rem;
	}
	/* Total on the slim tab — smaller so it fits the narrow rail */
	#mw-buylist-app .mwb-reopen-total {
		writing-mode: vertical-rl;
		font-size:    0.78rem;
	}
	/* Chevron points left (pull the buylist back in) on the vertical tab */
	#mw-buylist-app .mwb-reopen-chevron {
		border-left:   0;
		border-top:    4px solid transparent;
		border-bottom: 4px solid transparent;
		border-right:  6px solid currentColor;
	}
}

/* ------------------------------------------------------------------ */
/* Facets                                                               */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-facets-wrap {
	background:    var(--mwb-white);
	border:        var(--mwb-border);
	border-radius: var(--mwb-radius);
	box-shadow:    var(--mwb-shadow);
	padding:       14px 16px;
	margin-bottom: 0;
}

#mw-buylist-app .mwb-facets {
	display: flex;
	flex-direction: column;
	gap: 0;
}

#mw-buylist-app .mwb-facet-item {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	padding:       3px 10px;
	border-radius: 6px;
	font-size:     0.88rem;
	color:         var(--mwb-ink);
	cursor:        pointer;
	user-select:   none;
	transition:    background 0.12s, color 0.12s;
}

#mw-buylist-app .mwb-facet-item:hover {
	background: var(--mwb-grey-light);
}

/* Keyboard focus ring for the chips (now role="button" tabindex="0"):
   :focus-visible shows it ONLY for keyboard navigation, never on a mouse
   click — pointer users see no change. */
#mw-buylist-app .mwb-facet-item:focus { outline: none; }
#mw-buylist-app .mwb-facet-item:focus-visible {
	outline:        2px solid var(--mwb-green);
	outline-offset: 1px;
}

#mw-buylist-app .mwb-facet-item.is-active {
	background: var(--mwb-green);
	color:      var(--mwb-ink);
	font-weight: 700;
}

#mw-buylist-app .mwb-facet-item--brand {
	font-weight: 600;
}

#mw-buylist-app .mwb-facet-toggle {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           22px;
	height:          22px;
	padding:         0;
	margin-left:     6px;
	border:          1px solid var(--mwb-grey-mid);
	border-radius:   5px;
	background:      var(--mwb-white);
	color:           var(--mwb-grey-text);
	font-size:       1rem;
	line-height:     1;
	cursor:          pointer;
	flex-shrink:     0;
}

#mw-buylist-app .mwb-facet-toggle:hover {
	border-color: var(--mwb-green-dark);
	color:        var(--mwb-green-dark);
}

/* Children collapsed by default; .is-open reveals them. Uses a class, NOT the
   [hidden] attribute, because the display rule below would override [hidden]. */
#mw-buylist-app .mwb-facet-children {
	display:        none;
	padding-left:   10px;
	flex-direction: column;
	gap:            0;
	margin-top:     0;
}

#mw-buylist-app .mwb-facet-children.is-open {
	display: flex;
}

#mw-buylist-app .mwb-facet-item--console {
	font-size: 0.84rem;
	color:     var(--mwb-grey-text);
}

#mw-buylist-app .mwb-facet-item--console.is-active {
	color: var(--mwb-ink);
}

/* ------------------------------------------------------------------ */
/* Cart lines                                                           */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-cart-empty {
	font-size: 0.88rem;
	color:     var(--mwb-grey-text);
	margin:    0;
}

#mw-buylist-app .mwb-cart-line {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	padding:       10px 0;
	border-bottom: 1px solid var(--mwb-grey-mid);
}

#mw-buylist-app .mwb-cart-line:last-child {
	border-bottom: none;
}

#mw-buylist-app .mwb-cart-thumb {
	width:          44px;
	height:         44px;
	flex-shrink:    0;
	background:     var(--mwb-grey-mid);
	border-radius:  6px;
	overflow:       hidden;
}

#mw-buylist-app .mwb-cart-thumb-img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

#mw-buylist-app .mwb-cart-thumb span {
	font-size:    0.55rem;
	color:        var(--mwb-grey-text);
	text-align:   center;
	padding:      2px;
	word-break:   break-all;
	line-height:  1.2;
}

#mw-buylist-app .mwb-cart-info {
	flex:     1 1 0;
	min-width: 0;
}

#mw-buylist-app .mwb-cart-title {
	font-size:   0.88rem;
	font-weight: 700;
	color:       var(--mwb-ink);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

#mw-buylist-app .mwb-cart-console {
	font-size: 0.75rem;
	color:     var(--mwb-grey-text);
	margin-bottom: 4px;
}

#mw-buylist-app .mwb-cart-labels {
	display: flex;
	gap:     4px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

#mw-buylist-app .mwb-cart-label {
	font-size:     0.72rem;
	padding:       2px 6px;
	border-radius: 4px;
	font-weight:   600;
}

#mw-buylist-app .mwb-cart-label--comp {
	background: var(--mwb-grey-mid);
	color:      var(--mwb-ink);
}

#mw-buylist-app .mwb-cart-label--grade {
	background: #d9edd4;
	color:      var(--mwb-green-dark);
}

#mw-buylist-app .mwb-cart-price {
	font-size:   0.95rem;
	font-weight: 700;
	color:       var(--mwb-gold);
	font-variant-numeric: tabular-nums;
}

#mw-buylist-app .mwb-cart-price--no-offer {
	font-size:   0.78rem;
	font-weight: 400;
	color:       var(--mwb-grey-text);
}

#mw-buylist-app .mwb-cart-ctrl {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	flex-shrink:    0;
}

#mw-buylist-app .mwb-cart-qty {
	width:         44px;
	padding:       4px 6px;
	border:        1px solid var(--mwb-grey-mid);
	border-radius: 6px;
	font-size:     0.85rem;
	text-align:    center;
	color:         var(--mwb-ink);
	background:    var(--mwb-white);
}

#mw-buylist-app .mwb-cart-qty:focus {
	outline:      none;
	border-color: var(--mwb-green);
	box-shadow:   0 0 0 2px rgba(153,191,104,0.2);
}

#mw-buylist-app .mwb-cart-remove {
	background:    none;
	border:        none;
	cursor:        pointer;
	font-size:     1.1rem;
	color:         var(--mwb-grey-text);
	padding:       2px 5px;
	border-radius: 4px;
	line-height:   1;
	transition:    color 0.12s, background 0.12s;
}

#mw-buylist-app .mwb-cart-remove:hover {
	color:      #c0392b;
	background: #fdecea;
}

/* ------------------------------------------------------------------ */
/* Cart foot                                                            */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-total strong {
	color:       var(--mwb-gold);
	font-size:   1.1rem;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* See-more pagination button                                           */
/* ------------------------------------------------------------------ */
#mw-buylist-app .mwb-see-more {
	display:       block;
	width:         100%;
	margin-top:    12px;
	padding:       10px 20px;
	background:    transparent;
	border:        2px solid var(--mwb-green);
	border-radius: 8px;
	color:         var(--mwb-green);
	font-size:     0.95rem;
	font-weight:   700;
	cursor:        pointer;
	text-align:    center;
	transition:    background 0.15s, color 0.15s;
	grid-column:   1 / -1;
}

#mw-buylist-app .mwb-see-more:hover {
	background: var(--mwb-green);
	color:      var(--mwb-ink);
}

/* ------------------------------------------------------------------ */
/* "Added" toast -- lives on <body> (top-level, NOT under #mw-buylist-app,  */
/* which is transformed on wide screens and would trap position:fixed).      */
/* ------------------------------------------------------------------ */
.mwb-toast {
	position:      fixed;
	top:           80px;
	right:         0;
	z-index:       99999;
	max-width:     280px;
	padding:       13px 22px;
	background:    #5d8a33;
	color:         #ffffff;
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size:     0.95rem;
	font-weight:   700;
	border-radius: 8px 0 0 8px;
	box-shadow:    -2px 3px 14px rgba(0,0,0,0.22);
	transform:     translateX( 110% );
	transition:    transform 0.3s ease;
	pointer-events: none;
}

.mwb-toast::before {
	content:      "\2713\00a0";  /* check mark + nbsp */
}

.mwb-toast.is-visible {
	transform: translateX( 0 );
}

/* ------------------------------------------------------------------ */
/* Submit panel (Task 4)                                               */
/* ------------------------------------------------------------------ */
.mwb-submit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;}
.mwb-submit-panel{background:var(--mwb-app-bg,#18210f);color:#fff;max-width:560px;width:100%;border-radius:12px;padding:1.5rem;max-height:90vh;overflow:auto;}
.mwb-submit-panel fieldset{border:1px solid #3a4a26;border-radius:8px;margin:0 0 1rem;}
.mwb-submit-panel label{display:block;margin:.4rem 0;}
.mwb-submit-actions{display:flex;gap:.75rem;margin-top:1rem;}
.mwb-confirm{background:var(--mwb-gold,#c8902a);color:#1a1a1a;border:0;padding:.7rem 1.2rem;border-radius:8px;font-weight:600;cursor:pointer;}
.mwb-confirm:disabled{opacity:.5;cursor:not-allowed;}
.mwb-cancel{background:transparent;color:#fff;border:1px solid #586647;padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;}
.mwb-return-note{font-size:.85rem;color:#c9b890;margin:.5rem 0;}
.mwb-submit-panel h2{color:#fff;margin-top:0;}
.mwb-submit-panel input[type="radio"],.mwb-submit-panel input[type="checkbox"]{accent-color:var(--mwb-green,#99BF68);}
.mwb-etransfer{margin:.6rem 0 1rem;padding:.75rem .8rem;border:1px solid var(--mwb-gold,#c8902a);border-radius:8px;background:rgba(200,144,42,.08);}
.mwb-etransfer label{display:block;margin:0 0 .35rem;}
.mwb-payout-email{display:block;margin-top:.35rem;width:100%;box-sizing:border-box;padding:.5rem;border-radius:8px;border:1px solid #3a4a26;background:#fff;color:var(--mwb-ink,#16200d);}
.mwb-etransfer-hint{margin:0 0 .6rem;font-size:12px;color:#cfd9bf;line-height:1.5;}
.mwb-autodep .mwb-autodep-q{display:block;margin-bottom:.35rem;}
.mwb-autodep label{display:inline-block;margin:0 1.2rem .2rem 0;}
.mwb-autodep-note{margin:.6rem 0 0;padding:.5rem .6rem;border-radius:6px;background:rgba(153,191,104,.14);font-size:12px;color:var(--mwb-on-dark,#e7edda);line-height:1.5;}

/* The mobile console chip strip is hidden on desktop (the vertical accordion
   is used there); the mobile media query below shows it. */
#mw-buylist-app .mwb-facet-consoles { display: none; }

/* ================================================================== */
/* Mobile redesign (<=768px) — placed AFTER the base card/facet rules  */
/* so equal-specificity overrides win in source order. Desktop is      */
/* untouched (everything here is inside the media query).              */
/* ================================================================== */
@media ( max-width: 768px ) {
	/* Console picker (platform chips) sits ABOVE the search bar on mobile:
	   pick the system first, then search within it. (Overrides the order
	   set in the earlier mobile block.) */
	#mw-buylist-app .mwb-facets-wrap { order: 1; }
	#mw-buylist-app .mwb-searchbar   { order: 2; }

	/* ---- Compact result rows: cover left, info right, controls strip below ---- */
	#mw-buylist-app .mwb-grid { gap: 12px; }

	#mw-buylist-app .mwb-card {
		display:               grid;
		grid-template-columns: 72px 1fr;
		grid-template-areas:
			"cover info"
			"cover selects"
			"add   add";
		grid-template-rows: auto 1fr auto;
		column-gap:  12px;
		row-gap:     8px;
		padding:     10px;
		align-items: start;
	}
	#mw-buylist-app .mwb-badge { display: none; }      /* console shown in the info line */

	#mw-buylist-app .mwb-cover {
		grid-area:     cover;
		width:         72px;
		border-radius: 6px;
	}
	#mw-buylist-app .mwb-card-info { grid-area: info; padding: 0; }

	#mw-buylist-app .mwb-selects {
		grid-area:      selects;
		flex-direction: row;
		flex-wrap:      wrap;
		align-items:    center;
		gap:            6px;
		padding:        8px 0 0;
		border-top:     1px solid var(--mwb-grey-light);
	}
	#mw-buylist-app .mwb-sel       { flex: 1 1 0; min-width: 0; }
	#mw-buylist-app .mwb-qty-price { flex: 1 1 100%; }   /* qty (left) + price (right) on their own line */
	#mw-buylist-app .mwb-price     { font-size: 1.25rem; }
	#mw-buylist-app .mwb-add-btn   { grid-area: add; width: 100%; margin: 0; }

	/* Tickbox: display inline (wrap) so checkboxes sit side-by-side in the compact row */
	#mw-buylist-app .mwb-ticks {
		flex-direction: row;
		flex-wrap:      wrap;
		gap:            6px 12px;
		align-items:    center;
		flex:           1 1 100%;   /* own line, like qty-price */
	}

	/* Selects min-height not needed in compact mobile row (cover anchors height) */
	#mw-buylist-app .mwb-selects { min-height: 0; }

	/* ---- Platform facet chips: swipe strips, hidden scrollbar, fade hint ---- */
	#mw-buylist-app .mwb-facets-wrap { padding: 10px 12px; position: relative; }

	#mw-buylist-app .mwb-facets,
	#mw-buylist-app .mwb-facet-consoles {
		flex-direction:     row;
		flex-wrap:          nowrap;
		overflow-x:         auto;
		gap:                6px;
		scrollbar-width:    none;          /* Firefox */
		-ms-overflow-style: none;          /* old Edge */
		padding-bottom:     2px;
	}
	#mw-buylist-app .mwb-facets::-webkit-scrollbar,
	#mw-buylist-app .mwb-facet-consoles::-webkit-scrollbar { display: none; }  /* WebKit */

	#mw-buylist-app .mwb-facet-consoles {
		display:    flex;
		margin-top: 8px;
	}

	/* each brand wrapper becomes an inline chip slot; its accordion children stay hidden */
	#mw-buylist-app .mwb-facet-brand { flex: 0 0 auto; }
	#mw-buylist-app .mwb-facets .mwb-facet-children { display: none; }
	#mw-buylist-app .mwb-facet-toggle { display: none; }

	#mw-buylist-app .mwb-facet-item {
		flex:          0 0 auto;
		padding:       7px 14px;
		border-radius: 999px;
		background:    var(--mwb-grey-light);
		white-space:   nowrap;
		justify-content: center;
	}
	#mw-buylist-app .mwb-facet-item.is-active {
		background: var(--mwb-green);
		color:      var(--mwb-ink);
	}
	#mw-buylist-app .mwb-facet-item--console {
		background: transparent;
		border:     1px solid var(--mwb-grey-mid);
		color:      var(--mwb-grey-text);
		padding:    6px 12px;
	}
	#mw-buylist-app .mwb-facet-item--console.is-active {
		background:   var(--mwb-green);
		border-color: var(--mwb-green);
		color:        var(--mwb-ink);
	}

	/* right-edge "more →" fade hint on the wrap (covers both strips' overflow) */
	#mw-buylist-app .mwb-facets-wrap::after {
		content:       "";
		position:      absolute;
		top:           10px;
		right:         0;
		bottom:        10px;
		width:         26px;
		pointer-events: none;
		background:    linear-gradient( to right, rgba(255,255,255,0), var(--mwb-white) );
		border-radius: 0 var(--mwb-radius) var(--mwb-radius) 0;
	}

	/* ---- Buylist: one persistent sticky bottom bar that toggles open/closed ---- */
	#mw-buylist-app .mwb-cart-collapse { display: none; }   /* in-card "Hide" removed; the bar handles it */
	#mw-buylist-app .mwb-cart-reopen {
		position:   sticky;
		bottom:     0;
		z-index:    30;
		margin-top: 10px;
	}
	/* expanded: chevron points down ("tap to hide"); collapsed keeps the up chevron */
	#mw-buylist-app .mwb-cartrail:not(.is-collapsed) .mwb-reopen-chevron {
		border-bottom: 0;
		border-top:    6px solid currentColor;
	}
}

/* ---- Cart bonus promo ("Sell $X, get x% extra") ---- */
#mw-buylist-app .mwb-bonus-banner { background: #eef5e4; border: 1px solid #4f7a2b; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; font-size: 13px; color: #33511d; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#mw-buylist-app .mwb-bonus-chip { background: #c8902a; color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .4px; flex: none; }
#mw-buylist-app .mwb-bonus-line { color: #4f7a2b; font-weight: 600; font-size: 13px; margin: 0 0 4px; display: flex; justify-content: space-between; }
#mw-buylist-app .mwb-bonus-next { background: #f4f7ef; border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
#mw-buylist-app .mwb-bonus-next-label { margin: 0 0 6px; font-size: 12.5px; color: #33511d; font-weight: 600; }
#mw-buylist-app .mwb-bonus-bar { background: #dde5d2; border-radius: 4px; height: 6px; overflow: hidden; }
#mw-buylist-app .mwb-bonus-bar-fill { background: #4f7a2b; height: 6px; border-radius: 4px; width: 0; transition: width .25s ease; }

/* ---- "Most Wanted Games" showcase card header ---- */
#mw-buylist-app .mwb-card.is-mostwanted { border: 1px solid #4f7a2b; }
#mw-buylist-app .mwb-mw-band { background: #eef5e4; color: #33511d; font-size: 12px; font-weight: 700; line-height: 1.35; padding: 6px 10px; border-bottom: 1px solid #4f7a2b; border-radius: 8px 8px 0 0; }

/* ---- Most Wanted band on the mobile compact-row card: give it its own
   full-width grid row (unplaced it was auto-slotted into the 72px cover
   column and wrecked the row layout). ---- */
@media ( max-width: 768px ) {
	#mw-buylist-app .mwb-card.is-mostwanted {
		grid-template-areas:
			"band  band"
			"cover info"
			"cover selects"
			"add   add";
		grid-template-rows: auto auto 1fr auto;
	}
	#mw-buylist-app .mwb-mw-band {
		grid-area:     band;
		margin:        -10px -10px 0;   /* bleed to the card edges over its padding */
		border-radius: 8px 8px 0 0;
	}
}

/* The buylist page itself sits on BLACK (owner design 2026-07-05), including
   the sliver of body under the header. The body class comes from
   shortcode-buylist.php, keyed on the buylist_page setting; no other page
   carries it, so the pale-green site background is untouched elsewhere. */
body.mw-buylist-page {
	background-color: #000 !important;
}

/* ---- Selling FAQ (collapsed, bottom of the buylist page; 2026-07-06) ----
   The page is BLACK — dark cards, gold summaries, zero-JS <details>. Also
   renders for logged-OUT visitors (crawlers), where the body class still
   applies on the buylist page. */
.mwb-faq {
	margin: 40px auto 60px;
	padding: 0 20px; /* the app's inner padding — content edges align at every width */
	color: #d9ded2;
}
/* Readable line length regardless of how wide the section box gets. */
.mwb-faq > * {
	max-width: 860px;
}
/* Owner pick 2026-07-07: BELOW the app on the black page, LEFT edge lined up
   with the app's content. Below 1024px the theme constrains the app and the
   FAQ identically, so they align on their own; at >=1024px mirror the app's
   viewport breakout and its 20px inner padding. */
@media ( min-width: 1024px ) {
	.mwb-faq {
		position:  relative;
		left:      50%;
		transform: translateX( -50% );
		/* !important: the theme's constrained-layout engine force-caps direct
		   content children at the 620px content size and auto-centers them —
		   it beat the plain rule here (dev-verified). */
		width:     96vw !important;
		max-width: 1760px !important;
		margin-left:  0 !important;
		margin-right: 0 !important;
		/* border-box like the app itself (it's outside the app's scoped
		   box-sizing rule) — identical box math = identical left edge; the
		   20px matches the app's inner padding so content edges line up. */
		box-sizing: border-box;
		padding:   0 20px;
	}
}
.mwb-faq h2 {
	font-size: 16px;
	color: #fff;
	margin: 0 0 12px;
}
.mwb-faq-item {
	background: #121412;
	border: 1px solid #2a2d28;
	border-radius: 10px;
	margin-bottom: 8px;
	overflow: hidden;
}
.mwb-faq-item summary {
	cursor: pointer;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	color: #e3c27a;
	list-style-position: inside;
}
.mwb-faq-item summary:hover { color: #f0d290; }
.mwb-faq-item[open] summary { border-bottom: 1px solid #2a2d28; }
.mwb-faq-item p {
	margin: 0;
	padding: 10px 14px 12px;
	font-size: 12.5px;
	line-height: 1.55;
}
.mwb-faq-item p a { color: #99bf68; }