/*
 * Badgyver Rust Store: the game's store interface. Every size and colour is
 * measured on captures of the game's own store (2000 px wide), so the bars,
 * buttons, panels and cards match it; the type is the game's Roboto Condensed
 * and the icons its own icon font (icons.css).
 */

@font-face {
	font-family: "BRS Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-condensed-bold.woff2") format("woff2");
}

@font-face {
	font-family: "BRS Roboto Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-regular.woff2") format("woff2");
}

@font-face {
	font-family: "BRS Bangers";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bangers-regular.woff2") format("woff2");
}

body.brs {
	--brs-font: "BRS Roboto Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
	--brs-side: clamp(16px, 3.3vw, 66px);
	--brs-top: #181916;
	--brs-sub: #101010;
	--brs-btn: #202020;
	--brs-btn-hi: #2b2b2a;
	--brs-tool: #252523;
	--brs-text: #d9d2ca;
	--brs-dim: #8c8781;
	--brs-mute: #b7afa6;
	--brs-icon: #8f8a85;
	--brs-green: #5a6e37;
	--brs-green-hi: #6a8241;
	--brs-red: #cd402b;
	--brs-red-tag: #b13a26;
	--brs-gold: #cf9c42;
	--brs-gold-text: #c69541;
	--brs-panel: #544526;
	--brs-panel-line: #9c7437;
	--brs-card: #303030;
	--brs-row: #252525;
	--wd-main-bgcolor: #141414;
	--wd-text-color: var(--brs-text);
	--wd-title-color: #ece6de;
	--wd-primary-color: var(--brs-green);
	--wd-alternative-color: var(--brs-red);
	--wd-link-color: var(--brs-text);
	--wd-link-color-hover: #fff;
	--wd-form-bg: #1d1d1d;
	--wd-form-color: var(--brs-text);
	--wd-form-brd-color: #333;
	--wd-form-brd-color-focus: #555;
	--wd-form-placeholder-color: var(--brs-dim);
	--wd-brd-radius: 0px;
	--color-gray-100: #222;
	--color-gray-200: #2a2a2a;
	--color-gray-300: #333;
	--brdcolor-gray-200: #2c2c2c;
	--brdcolor-gray-300: #333;
	--bgcolor-white: #1d1d1d;
	--bgcolor-gray-100: #1a1a1a;
	--bgcolor-gray-200: #222;
	min-height: 100vh;
	background: transparent !important;
	color: var(--brs-text);
	font-family: var(--brs-font);
}

/*
 * Never white, on any device: the page root is dark too (it is what shows
 * when a phone bounces past the top or bottom, or while its address bar
 * hides), and the backdrop is a layer of its own, fixed to the screen and as
 * tall as the largest the screen can get. A fixed background on the body
 * itself is ignored by mobile browsers, which is what let white show.
 */
html { background: #121211; color-scheme: dark; }

body.brs::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background:
		radial-gradient(70% 55% at 50% 0%, rgba(58, 54, 50, .55), transparent 70%),
		linear-gradient(180deg, #1e1d1b 0%, #161615 45%, #0e0e0e 100%);
	pointer-events: none;
}

/* The inventory and the account have the game's red glow down the left. */
body.brs-is-inventory::before {
	background:
		radial-gradient(40% 70% at 0% 100%, rgba(150, 40, 25, .35), transparent 70%),
		radial-gradient(70% 55% at 50% 0%, rgba(58, 54, 50, .55), transparent 70%),
		linear-gradient(180deg, #1e1d1b 0%, #161615 45%, #0e0e0e 100%);
}

body.brs .website-wrapper,
body.brs .main-page-wrapper,
body.brs .wd-page-content {
	background: transparent !important;
}

body.brs .wd-content-layout {
	width: 100%;
	max-width: none !important;
	margin: 0;
	padding: 40px var(--brs-side) 140px !important;
}

body.brs .wd-toolbar,
body.brs .wd-page-title,
body.brs .whb-header,
body.brs .woocommerce-breadcrumb,
body.brs .wd-breadcrumbs { display: none !important; }

body.brs h1, body.brs h2, body.brs h3, body.brs h4, body.brs h5, body.brs h6 {
	color: #ece6de;
	font-family: var(--brs-font);
}

body.brs a { text-decoration: none; }

.brs .ri { font-size: 22px; line-height: 1; }

/* ================================================================ Top bar */

.brs-top {
	position: relative;
	z-index: 400;
	font-family: var(--brs-font);
	text-transform: uppercase;
}

.brs-bar {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 72px;
	padding: 0 var(--brs-side);
	border-bottom: 1px solid #45312d;
	background: var(--brs-top);
	box-shadow: 0 1px 0 #0a0a0a;
}

/* The logo: just the skull, in the game's red-orange, as tall as the bar. */
.brs-logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.brs-logo__sq { display: contents; }

.brs-logo__mark {
	display: block;
	width: 48px;
	height: 38px;
	background: var(--brs-red);
	-webkit-mask: var(--brs-logo) center / contain no-repeat;
	mask: var(--brs-logo) center / contain no-repeat;
	transition: filter .2s ease;
}

.brs-logo:hover .brs-logo__mark { filter: brightness(1.15); }

/* The main tabs, in the middle. */
.brs-main {
	position: absolute;
	top: 0;
	bottom: -1px;
	left: 50%;
	display: flex;
	transform: translateX(-50%);
}

.brs-main__tab {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 32px;
	color: var(--brs-text) !important;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.brs-main__tab .ri { color: #a9a39c; font-size: 22px; }
.brs-main__tab:hover { background: rgba(255, 255, 255, .04); color: #fff !important; }

.brs-main__tab.is-on {
	background: linear-gradient(180deg, #24191a 0%, #4c2a24 45%, #7c3626 100%);
	color: #fff !important;
}

.brs-main__tab.is-on .ri { color: #d9cfc6; }

/* The tools, right. */
.brs-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.brs-tool {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--brs-tool) !important;
	color: var(--brs-text) !important;
	font-family: var(--brs-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}

.brs-tool .ri { color: var(--brs-icon); font-size: 20px; }
.brs-tool.is-square { justify-content: center; width: 42px; padding: 0; }
.brs-tool:hover, .brs-tool[aria-expanded="true"] { background: #34332f !important; color: #fff !important; }
.brs-tool[aria-expanded="true"] { background: var(--brs-green) !important; }
.brs-tool[aria-expanded="true"] .ri { color: #e6e9dd; }

/* Notifications. */
.brs-bell { position: relative; }

.brs-bell__dot {
	position: absolute;
	top: 5px;
	right: 5px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	background: var(--brs-red);
	color: #fff;
	font-size: 10px;
	line-height: 15px;
	text-align: center;
}

.brs-notes {
	position: absolute;
	top: calc(100% + 8px);
	right: -60px;
	width: 464px;
	background: #121212;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .7);
}

.brs-notes__head {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 50px;
	padding: 0 16px;
	background: var(--brs-green);
	color: #e8ecdf;
	font-size: 19px;
	font-weight: 700;
}

.brs-notes__head .ri { font-size: 20px; }
.brs-notes__head > span { flex: 1; }

/* Mark all as read: a small dark button on the green bar. */
.brs-notes__read {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	min-height: 0;
	padding: 0 12px;
	border: 0;
	background: rgba(0, 0, 0, .28) !important;
	box-shadow: none !important;
	color: #e8ecdf !important;
	font-family: var(--brs-font);
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.brs-notes__read:hover { background: rgba(0, 0, 0, .45) !important; color: #fff !important; }
.brs-notes__read .ri { font-size: 16px; }

/* Read notes and their count stay hidden whatever other rules say. */
.brs-bell__dot[hidden],
.brs-notes__read[hidden],
.brs-notes__empty[hidden],
.brs-notes__list li[hidden] { display: none !important; }

.brs-notes__list {
	max-height: 380px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	list-style: none;
}

.brs-notes__list li { margin: 0 0 6px; list-style: none; }

.brs-notes__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	background: #1d1d1d;
	color: var(--brs-text) !important;
	transition: background .15s ease;
}

.brs-notes__list a:hover { background: #2a2a2a; }
.brs-notes__list img { width: 64px; height: 48px; object-fit: cover; }
.brs-notes__list span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brs-notes__list b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.brs-notes__list i { color: var(--brs-dim); font-size: 13px; font-style: normal; letter-spacing: .08em; }

.brs-notes__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	height: 330px;
	color: #e3ddd5;
	font-size: 19px;
	font-weight: 700;
}

.brs-notes__empty span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #2a2a2a;
}

.brs-notes__empty .ri { color: #a7a29b; font-size: 28px; }

/* =============================================================== Store bar */

.brs-sub {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 66px;
	padding: 0 var(--brs-side);
	background: var(--brs-sub);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.brs-sub.is-bare { justify-content: flex-end; }

.brs-shop {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.brs-shop__cats { display: flex; gap: 6px; }

.brs-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	padding: 0 18px;
	border: 0;
	background: var(--brs-btn);
	color: #c9c3bc !important;
	font-family: var(--brs-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.brs-btn .ri { color: var(--brs-icon); font-size: 22px; }
.brs-btn:hover { background: var(--brs-btn-hi); color: #fff !important; }
.brs-btn:hover .ri { color: #c9c3bc; }
.brs-btn.is-on { background: var(--brs-green); color: #e4e8d8 !important; }
.brs-btn.is-on .ri { color: #c6ceb3; }
.brs-btn.is-on:hover { background: var(--brs-green-hi); }

/* Category buttons: icon and name, like the store tabs; the open one is lit. */
.brs-btn.is-cat.is-open { background: #2a2a2a; color: #e2dcd4 !important; }
.brs-btn.is-cat.is-open .ri { color: #c9c3bc; }

/* Icon-only buttons (social links). */
.brs-btn.is-icon { width: 46px; padding: 0; }
.brs-btn.is-icon span { display: none; }
.brs-btn.is-icon.is-open { width: auto; padding: 0 18px; background: #2a2a2a; color: #e2dcd4 !important; }
.brs-btn.is-icon.is-open span { display: inline; }
.brs-btn.is-icon.is-open .ri { color: #c9c3bc; }

.brs-find {
	display: flex;
	flex: none;
	gap: 18px;
	margin-left: auto;
}

.brs-search {
	position: relative;
	display: flex;
	width: 312px;
	height: 46px;
	margin: 0;
	background: #242424;
	transition: width .2s ease;
}

/* Folded to the magnifier until it is pressed (rust.js), so the bar stays
   compact; open while it holds a search, or has the focus. */
.brs-search.is-folded { width: 46px; background: var(--brs-btn); }
.brs-search.is-folded:hover { background: var(--brs-btn-hi); }
.brs-search.is-folded input[type="search"] { padding: 0 !important; opacity: 0; pointer-events: none; }
.brs-search.is-folded button { cursor: pointer; }

.brs-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 48px 0 16px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--brs-text) !important;
	font-family: var(--brs-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-search input::placeholder { color: var(--brs-dim); opacity: 1; }

.brs-search button {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: #a9a39c !important;
	cursor: pointer;
}

.brs-search button .ri { font-size: 24px; }

.brs-btn.is-cart { position: relative; background: #282828; }

.brs-cartcount {
	min-width: 20px;
	height: 20px;
	margin-left: -4px;
	padding: 0 5px;
	background: var(--brs-red);
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
}

.brs-cartcount.is-empty { display: none; }

/* =========================================================== Section heads */

.brs-head {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0 0 32px;
	font-family: var(--brs-font);
	text-transform: uppercase;
}

.brs-head__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	color: var(--brs-red);
}

.brs-head__icon .ri { font-size: 58px; }

.brs-head__icon.is-ring {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #c8442e;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
	color: #3a1a12;
}

.brs-head__icon.is-ring .ri { font-size: 34px; }

.brs-head__txt { flex: 1; min-width: 0; }

.brs-head__title {
	margin: 0 !important;
	color: #ece6de !important;
	font-size: 34px !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: .01em;
}

.brs-head__sub {
	margin: 6px 0 0 !important;
	color: #bdb6ae;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
}

/* "Refresh in": gold, with the time in a dark box. */
.brs-refresh {
	display: inline-flex;
	flex: none;
	align-items: stretch;
	gap: 0;
	padding: 6px;
	background: var(--brs-gold);
	color: #3b2b10;
	font-family: var(--brs-font);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-refresh > span { display: flex; align-items: center; padding: 0 14px 0 10px; }

.brs-refresh b {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	background: #231b14;
	color: var(--brs-gold);
	font-weight: 700;
}

.brs-refresh b .ri { font-size: 20px; }

/* "View all" on the right of a heading: one of the store's buttons. */
.brs-head__more { flex: none; gap: 8px; }
.brs-head__more .ri { margin-right: -6px; }

/* The home page summary: a section per category, newest first. */
.brs-summary__sec { margin-top: 18px; }
.brs-summary__sec .brs-head { margin-bottom: 24px; }
.brs-summary__sec .brs-head__icon { width: 52px; height: 52px; }
.brs-summary__sec .brs-head__icon .ri { font-size: 48px; }
.brs-summary__sec .brs-head__title { font-size: 30px !important; }

/* The new releases strip: the store's cards in a row that moves along. */
.brs-slider {
	--brs-gap: 32px;
	position: relative;
	margin: 0 0 32px;
}

.brs-slider__strip {
	display: flex;
	gap: var(--brs-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

.brs-slider__strip::-webkit-scrollbar { display: none; }
.brs-slider__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.brs-slider__strip.is-dragging .brs-card { pointer-events: none; }

.brs-slider__slot {
	flex: none;
	width: 100%;
	scroll-snap-align: start;
}

.brs-slider__slot .brs-card { width: 100%; }

/* As wide as a card of the four-a-row shelves below, at every width they
   change at: four, then three, two and one. */
.brs-slider__slot { width: calc((100% - var(--brs-gap) * 3) / 4); }
@media (max-width: 1300px) { .brs-slider__slot { width: calc((100% - var(--brs-gap) * 2) / 3); } }
@media (max-width: 1000px) { .brs-slider__slot { width: calc((100% - var(--brs-gap)) / 2); } }
@media (max-width: 640px) { .brs-slider__slot { width: 100%; } }

/* The game's square buttons, over the ends of the strip. */
.brs-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(32, 32, 32, .92) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
	color: #c9c3bc !important;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .15s ease, color .15s ease;
}

.brs-slider__nav:hover { background: var(--brs-green) !important; color: #e4e8d8 !important; }
.brs-slider__nav .ri { font-size: 28px; }
.brs-slider__nav.is-prev { left: -12px; }
.brs-slider__nav.is-next { right: -12px; }

/* A guide's card: the chip reads instead of selling. */
.brs-chip.is-read { pointer-events: none; }

/* ================================================================== Cards */

.brs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
	overflow: hidden;
	background: var(--brs-card);
	font-family: var(--brs-font);
	text-transform: uppercase;
	isolation: isolate;
}

.brs-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.brs-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.brs-card:hover .brs-card__img { transform: scale(1.04); filter: brightness(1.08); }

.brs-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.brs-card__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	background: var(--brs-red-tag);
	color: #f4d6c9;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .03em;
}

/* The price chip: the cart icon, then the price. */
.brs-chip {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: stretch;
	height: 32px;
	color: #e3ddd5 !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.brs-chip .ri {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: auto;
	background: rgba(26, 26, 26, .82);
	color: #a9a39c;
	font-size: 19px;
}

.brs-chip b {
	display: flex;
	align-items: center;
	padding: 0 10px;
	background: rgba(44, 44, 43, .9);
	font-weight: 700;
	white-space: nowrap;
}

.brs-chip:hover .ri { background: var(--brs-green); color: #e8ecdf; }
.brs-chip.loading { opacity: .6; }
.brs-chip.added .ri { --ri: url("../icons/check.svg"); }
.brs-card .added_to_cart { display: none !important; }

.brs-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 16px 14px;
	pointer-events: none;
}

.brs-card__new,
.brs-card__label {
	margin-bottom: 9px;
	padding: 4px 7px;
	background: #d7a648;
	color: #3a2a0e;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
}

.brs-card__title {
	display: -webkit-box;
	overflow: hidden;
	color: #ece6de;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.12;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.brs-card__sub {
	margin-top: 3px;
	color: #b7afa6;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	white-space: nowrap;
}

/* Picture cards: the picture fills the card and darkens at the foot. */
.brs-card--image,
.brs-card--tall,
.brs-card--banner,
.brs-card--tile {
	aspect-ratio: 443 / 335;
}

.brs-card--image::after,
.brs-card--tall::after,
.brs-card--banner::after,
.brs-card--tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(18, 18, 18, .55) 72%, rgba(22, 22, 22, .96) 100%);
	pointer-events: none;
}

.brs-card--tile { aspect-ratio: 285 / 335; }
.brs-card--tall { aspect-ratio: auto; height: 100%; }
.brs-card--tall .brs-card__img { object-position: 50% 30%; }
.brs-card--banner { aspect-ratio: 1870 / 522; }
.brs-card--banner .brs-card__title { font-size: 28px; }

/* The featured cards of the weekly picks: red, with the picture framed. */
.brs-card--featured,
.brs-card--plain {
	aspect-ratio: 248 / 345;
}

.brs-card--featured {
	border: 2px solid #b0452f;
	background: radial-gradient(120% 75% at 50% 18%, #2a1d17 0%, #4b2519 45%, #7a3424 100%);
}

.brs-card--plain {
	background: linear-gradient(180deg, #363636 0%, #3a3836 40%, #5a4f43 100%);
}

.brs-card--featured .brs-card__media,
.brs-card--plain .brs-card__media {
	inset: 54px 14px auto;
	height: 46%;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
}

.brs-card--plain .brs-card__title { color: #d8d1c9; }

/* ======================================================== Featured (home) */

.brs-featured {
	display: grid;
	grid-template-columns: minmax(0, 476fr) minmax(0, 835fr) minmax(0, 476fr);
	gap: 41px;
	height: max(720px, calc(100vh - 138px - 40px - 104px));
}

.brs-featured__hero { min-height: 0; }

.brs-featured__side {
	display: grid;
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 30px;
	min-height: 0;
}

.brs-featured__side .brs-card { aspect-ratio: auto; height: 100%; }

/* The gold panel of the weekly picks. */
.brs-weekly {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 3px solid var(--brs-panel-line);
	background: var(--brs-panel);
}

.brs-weekly__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 30px 26px;
}

.brs-weekly__title {
	margin: 0 !important;
	color: var(--brs-gold-text) !important;
	font-family: var(--brs-font) !important;
	font-size: 38px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: uppercase;
}

.brs-weekly__grid {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: max-content;
	gap: 10px 12px;
	min-height: 0;
	padding: 0 30px 18px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--brs-panel-line) transparent;
}

.brs-weekly__all {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	background: var(--brs-gold);
	color: #4a3410 !important;
	font-family: var(--brs-font);
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-weekly__all:hover { background: #ddaa4e; }
.brs-weekly__all .ri { font-size: 20px; }

/* =================================================================== Grids */

.brs-grid {
	display: grid;
	gap: 32px;
	margin-bottom: 32px;
}

.brs-grid--1 { grid-template-columns: minmax(0, 1fr); }
.brs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brs-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.brs-shelf--limited .brs-grid--3 .brs-card { aspect-ratio: 602 / 335; }
.brs-shelf--limited .brs-grid--3 .brs-card__media { inset: 50px 22% auto; height: 52%; }

.brs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 60px 20px;
	background: rgba(30, 30, 30, .7);
	color: var(--brs-mute);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.brs-empty img { width: 128px; height: 128px; }

/* ============================================= Product: the crafting panel */

.brs-product { font-family: var(--brs-font); }

.brs-craft {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px;
	max-width: 1164px;
	margin: 20px auto 40px;
	padding: 50px 66px 60px 70px;
	background: #262626;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.brs-craft__close {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: #3a3a3a;
	color: #cfc9c2 !important;
	transition: background .15s ease;
}

.brs-craft__close:hover { background: var(--brs-red); color: #fff !important; }
.brs-craft__close .ri { font-size: 28px; }

.brs-craft__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
}

.brs-craft__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6));
}

.brs-craft__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.brs-craft__thumbs button {
	width: 74px;
	height: 56px;
	min-height: 0;
	padding: 0;
	border: 2px solid transparent;
	background: #1c1c1c;
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease;
}

.brs-craft__thumbs button.is-on,
.brs-craft__thumbs button:hover { border-color: var(--brs-green); opacity: 1; }
.brs-craft__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.brs-craft__title {
	margin: 24px 60px 0 0 !important;
	color: #f1ebe3 !important;
	font-size: 44px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-transform: uppercase;
}

.brs-craft__kind {
	margin: 10px 0 0 !important;
	color: #cfc9c2;
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-craft__desc {
	margin-top: 22px;
	color: #c9c3bc;
	font-family: var(--brs-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.brs-craft__desc p { margin: 0 0 8px; }

.brs-craft__costh {
	margin: 34px 0 10px !important;
	color: #e3ddd5 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.brs-craft__cost {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brs-craft__cost li {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	margin: 0;
	padding: 0 14px;
	background: #1b1b1b;
	color: #e3ddd5;
	font-size: 15px;
	font-weight: 700;
	list-style: none;
	text-transform: uppercase;
}

.brs-craft__cost img { width: 24px; height: 24px; object-fit: contain; }
.brs-craft__cost b { font-weight: 700; }
.brs-craft__cost span { color: var(--brs-mute); }
.brs-craft__cost li.is-was { background: #4a2219; }
.brs-craft__cost s { opacity: .8; }

.brs-craft__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 36px 0 8px !important;
	padding: 10px 14px;
	background: #3b4a26;
	color: #a9c070;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-craft__note .ri { font-size: 20px; }

/* The buy button: the game's green "craft" button. */
.brs-craft__buy form.cart {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
}

.brs-craft__buy .quantity { display: none !important; }

.brs-craft__buy .single_add_to_cart_button,
.brs-craft__buy .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	min-height: 0;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--brs-green) !important;
	color: #dfe5cf !important;
	font-family: var(--brs-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-craft__buy .single_add_to_cart_button::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("../icons/tools.svg") center / contain no-repeat;
	mask: url("../icons/tools.svg") center / contain no-repeat;
}

.brs-craft__buy .single_add_to_cart_button:hover { background: var(--brs-green-hi) !important; }
.brs-craft__buy .wd-buy-now-btn { background: #3a3a3a !important; }

.brs-craft__meta {
	margin-top: 22px;
	color: var(--brs-dim);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.brs-craft__meta a { color: var(--brs-mute) !important; }
.brs-craft__meta .product_meta { display: flex; flex-direction: column; gap: 4px; }

/* Description and the plugin's tabs, as the game's options list. */
.brs-details {
	max-width: 1164px;
	margin: 0 auto 50px;
	padding: 34px 40px;
	background: rgba(24, 24, 24, .92);
}

.brs-details .wc-tabs,
.brs-details .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

.brs-details .wc-tabs li,
.brs-details .tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	list-style: none;
}

.brs-details .wc-tabs li::before,
.brs-details .wc-tabs li::after { display: none !important; }

.brs-details .wc-tabs li a {
	display: flex !important;
	align-items: center;
	height: 46px;
	padding: 0 20px !important;
	background: var(--brs-btn);
	color: #c9c3bc !important;
	font-family: var(--brs-font);
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

.brs-details .wc-tabs li.active a { background: var(--brs-green); color: #e4e8d8 !important; }
.brs-details .wc-tab,
.brs-details .woocommerce-Tabs-panel { color: #cfc9c2; font-size: 16px; line-height: 1.6; }
.brs-details .wd-accordion-title,
.brs-details .wd-tab-wrapper > .wd-accordion-title { background: var(--brs-btn); color: #c9c3bc; }

.brs-related { margin-bottom: 40px; }

/* ================================================= Inventory (the account) */

.brs-inv {
	display: grid;
	grid-template-columns: 310px minmax(0, 1fr);
	gap: 84px;
	font-family: var(--brs-font);
}

.brs-inv__side {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.brs-inv__refresh,
.brs-inv__workshop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	background: #474747;
	color: #d9d3cc !important;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-inv__refresh:hover,
.brs-inv__workshop:hover { background: #575757; }
.brs-inv__refresh .ri,
.brs-inv__workshop .ri { color: #a9a39c; font-size: 22px; }
.brs-inv__workshop { margin-top: 60px; }

.brs-inv__h {
	margin: 38px 0 10px !important;
	color: #cfc9c2 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

.brs-inv__mats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.brs-inv__mats a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 6px 14px;
	background: #1e1c1b;
	color: #e3ddd5 !important;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-inv__mats a:hover { background: #2a2826; }
.brs-inv__mats img { width: 58px; height: 58px; object-fit: contain; }
.brs-inv__mats b { font-size: 24px; font-weight: 700; }
.brs-inv__mats span { color: #cfc9c2; font-size: 14px; font-weight: 700; }

.brs-inv__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.brs-inv__nav a {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 66px;
	padding: 0 18px;
	background: #2c2a29;
	color: #d9d3cc !important;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-inv__nav a:hover { background: #393634; }
.brs-inv__nav a.is-active { background: var(--brs-green); color: #e8ecdf !important; }
.brs-inv__nav img { width: 44px; height: 44px; object-fit: contain; }

.brs-inv__main { min-width: 0; color: #cfc9c2; }

.brs-grid--inv { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }

.brs-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1;
	padding: 14px 16px;
	overflow: hidden;
	border: 2px solid transparent;
	background: linear-gradient(180deg, #3a3a3a, #333);
	color: #e3ddd5 !important;
	text-transform: uppercase;
	transition: background .15s ease;
}

.brs-item:hover { background: linear-gradient(180deg, #454545, #3a3a3a); }
.brs-item.is-licensed { border-color: #3d6b98; }

.brs-item__img {
	position: absolute;
	top: 14px;
	left: 50%;
	width: 74%;
	height: 52%;
	object-fit: cover;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
	transform: translateX(-50%);
}

.brs-item__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #3a78b4;
	color: #e6f0fa;
}

.brs-item__badge .ri { font-size: 18px; }

.brs-item__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.brs-item__sub {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	overflow: hidden;
	color: #b7afa6;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	white-space: nowrap;
}

.brs-item__sub .ri { font-size: 15px; }

/* =============================================== WooCommerce, in the game */

body.brs .woocommerce-notices-wrapper > *,
body.brs .woocommerce-message,
body.brs .woocommerce-info,
body.brs .woocommerce-error {
	margin: 0 0 20px !important;
	padding: 14px 18px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #3b4a26 !important;
	color: #c7d79f !important;
	font-family: var(--brs-font);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}

body.brs .woocommerce-error { background: #4a2219 !important; color: #f0c4b5 !important; }
body.brs .woocommerce-message a,
body.brs .woocommerce-info a { color: #fff !important; }

body.brs .button,
body.brs button.button,
body.brs input[type="submit"],
body.brs .wc-block-components-button,
body.brs .btn {
	min-height: 46px;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--brs-green) !important;
	box-shadow: none !important;
	color: #e4e8d8 !important;
	font-family: var(--brs-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
}

body.brs .button:hover,
body.brs button.button:hover,
body.brs input[type="submit"]:hover { background: var(--brs-green-hi) !important; }

body.brs input[type="text"],
body.brs input[type="email"],
body.brs input[type="password"],
body.brs input[type="tel"],
body.brs input[type="number"],
body.brs input[type="search"],
body.brs input[type="url"],
body.brs select,
body.brs textarea,
body.brs .select2-container--default .select2-selection--single {
	border: 1px solid #333 !important;
	border-radius: 0 !important;
	background: #1d1d1d !important;
	color: var(--brs-text) !important;
	font-family: var(--brs-font);
}

body.brs label,
body.brs legend { color: #cfc9c2; font-family: var(--brs-font); font-weight: 700; text-transform: uppercase; }

/* Tables: the game's options rows. */
body.brs table,
body.brs .shop_table {
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 4px !important;
	color: #d9d3cc;
	font-family: var(--brs-font);
}

body.brs table th,
body.brs table td {
	padding: 14px 16px !important;
	border: 0 !important;
	background: #1f1f1f;
	color: #d9d3cc;
}

body.brs table thead th {
	background: transparent;
	color: #cfc9c2;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.brs .cart_totals,
body.brs .woocommerce-checkout-review-order,
body.brs #customer_details,
body.brs .woocommerce-form-login,
body.brs .woocommerce-form-register,
body.brs .woocommerce-MyAccount-content > form,
body.brs .wd-cart-totals,
body.brs .checkout-order-review {
	padding: 26px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #222 !important;
}

body.brs .woocommerce-form-login,
body.brs .woocommerce-form-register { max-width: 560px; }
body.brs .wd-login-title,
body.brs .woocommerce-MyAccount-content h2,
body.brs .woocommerce-MyAccount-content h3 { text-transform: uppercase; }

body.brs .price,
body.brs .amount { color: #e9e2d9; }

/* Posts and pages keep their content readable on the dark ground. */
body.brs-is-guides .wd-content-layout,
body.brs-is-page .wd-content-layout {
	color: #cfc9c2;
	font-size: 17px;
}

body.brs .entry-content,
body.brs .wd-entry-content { color: #cfc9c2; }
body.brs .wd-post,
body.brs .blog-post-loop {
	background: rgba(30, 30, 30, .8);
}

body.brs .wd-post .wd-entities-title a,
body.brs .post-title a { color: #ece6de !important; font-family: var(--brs-font); text-transform: uppercase; }

/* ================================================================= Bottom */

.brs-foot {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 33px;
	height: 72px;
	padding: 0 var(--brs-side) 6px;
	background: linear-gradient(180deg, transparent, rgba(10, 10, 10, .9) 45%);
	font-family: var(--brs-font);
	pointer-events: none;
}

.brs-foot > * { pointer-events: auto; }

/* Where the game has its chat line: the store's news, in yellow, sliding in
   from the right edge and out at the left at an even pace (the script sets
   the time from the length, so long news do not run faster). */
.brs-news {
	position: relative;
	display: flex;
	align-items: center;
	width: 418px;
	height: 38px;
	overflow: hidden;
	background: #2f2f2e;
	-webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
	mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.brs-news__track {
	display: flex;
	flex: none;
	padding-left: 100%;
	animation: brs-news var(--brs-news-time, 24s) linear infinite;
	will-change: transform;
}

.brs-news:hover .brs-news__track { animation-play-state: paused; }

.brs-news__run {
	display: flex;
	flex: none;
	align-items: center;
	gap: 28px;
	white-space: nowrap;
}

/* All in white, each news item in its own typeface so one is told from the
   next: the store's own font first, then faces every computer carries. */
.brs-news__run span {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.brs-news__run span:nth-of-type(5n+2) { font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: .05em; }
.brs-news__run span:nth-of-type(5n+3) { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; letter-spacing: 0; }
.brs-news__run span:nth-of-type(5n+4) { font-family: "Courier New", Consolas, monospace; font-size: 15px; letter-spacing: 0; }
.brs-news__run span:nth-of-type(5n+5) { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 14px; letter-spacing: .01em; }

.brs-news__sep { color: #8f8a85; font-size: 9px; font-style: normal; }

@keyframes brs-news {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* Still only when the store's calm option is on and the device asks for
   less motion, like the other effects. */
@media (prefers-reduced-motion: reduce) {
	.brs-tv-calm .brs-news__track { padding-left: 12px; animation: none; }
}

.brs-foot__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 16px;
	background: #2d2b28;
	color: #d9d3cc !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .15s ease;
}


.brs-foot__btn .ri { color: #8f8a85; font-size: 22px; }
.brs-foot__btn:hover { background: #3a3835; }

.brs-foot__right {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

/* "JOIN OUR DISCORD", one word at a time: every word sits in the same
   cell, so the box is as wide as the longest one and no wider. */
.brs-discord { justify-content: center; min-width: 0; }

.brs-discord__words { display: grid; }

.brs-discord__words span {
	grid-area: 1 / 1;
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: translateY(60%);
	transition: opacity .28s ease, transform .28s ease;
}

.brs-discord__words span.is-on { opacity: 1; transform: none; }
.brs-discord__words span.is-off { opacity: 0; transform: translateY(-60%); }

@media (prefers-reduced-motion: reduce) {
	.brs-tv-calm .brs-discord__words span { transform: none !important; transition: opacity .2s linear; }
}

/* Discord's own logo, in its brand colour. */
.brs-foot__discord { display: flex; color: #5865f2 !important; transition: color .15s ease, transform .15s ease; }
.brs-foot__discord:hover { color: #7983f5 !important; transform: scale(1.06); }
.brs-foot__discord-mark { display: block; width: 44px; height: 34px; filter: drop-shadow(0 0 1px #000); }

/* Copyright, legal pages and the Facepunch notice, under the brand in the
   footer. */
.brs-legal {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 360px;
	margin-top: 22px;
	color: #f1ede8;
	font-size: 13px;
	line-height: 1.4;
}

.brs-legal b { font-weight: 700; }
.brs-legal p,
.brs-footer__brand .brs-legal p { display: flex; flex-wrap: wrap; gap: 2px 14px; max-width: none; margin: 0 !important; color: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; }
.brs-legal a { color: #cfc9c2 !important; }
.brs-legal a:hover { color: #fff !important; }
.brs-legal span { color: #8c8781; font-size: 12px; }

/* ============================================================== Responsive */

@media (max-width: 1600px) {
	.brs-main__tab { padding: 0 22px; font-size: 16px; }
	.brs-tool span { display: none; }
	.brs-tool { justify-content: center; width: 42px; padding: 0; }
	.brs-search:not(.is-folded) { width: 240px; }
	.brs-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Laptops: the three columns no longer fit, so the tall card and the gold
   panel share the first row and the side cards make the second. */
@media (max-width: 1500px) {
	.brs-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); height: auto; }
	.brs-featured__hero { min-height: 420px; }
	.brs-featured__side { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
	.brs-featured__side .brs-card { aspect-ratio: 443 / 335; height: auto; }
	.brs-weekly__grid { flex: none; overflow: visible; }
}

/* The top tabs leave the middle and sit beside the logo, so they never run
   into the buttons on the right. */
@media (max-width: 1200px) {
	.brs-main { position: static; transform: none; margin: 0 auto; }
	.brs-main__tab { padding: 0 16px; font-size: 15px; gap: 8px; }
	.brs-tools { gap: 10px; }
}

@media (max-width: 1180px) {
	.brs-weekly__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Store tabs with their names (every category too), a little tighter than
 * the other buttons. On smaller laptops the cart keeps only its icon and the
 * search box narrows, so everything stays on one row; below 1300px the tabs
 * go back to icons.
 */
.brs-shop { gap: 10px; }
.brs-shop .brs-btn { gap: 9px; padding: 0 14px; }

@media (max-width: 1600px) {
	.brs-find { gap: 10px; }
	.brs-btn.is-cart { gap: 0; width: 46px; padding: 0; }
	.brs-btn.is-cart span { display: none; }
}

@media (max-width: 1440px) {
	.brs-search:not(.is-folded) { width: 220px; }
	.brs-shop { gap: 8px; }
	.brs-shop .brs-btn { gap: 8px; padding: 0 11px; font-size: 13px; letter-spacing: 0; }
	.brs-shop__cats { gap: 4px; }
}

@media (max-width: 1300px) {
	.brs-shop .brs-btn:not(.is-icon) span { display: none; }
	.brs-shop .brs-btn:not(.is-icon) { width: 46px; padding: 0; }
	.brs-btn.is-cart span { display: none; }
	.brs-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.brs-craft { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 40px 30px; }
	.brs-inv { grid-template-columns: 260px minmax(0, 1fr); gap: 34px; }
}

/* With fewer tabs the names still fit down to 1200px. */
@media (max-width: 1300px) and (min-width: 1201px) {
	.brs-shop .brs-btn:not(.is-icon) span { display: inline; }
	.brs-shop .brs-btn:not(.is-icon) { width: auto; padding: 0 11px; }
}

@media (max-width: 1000px) {
	.brs-main { position: static; transform: none; margin: 0 auto; }
	.brs-main__tab span { display: none; }
	.brs-main__tab { padding: 0 18px; }
	.brs-sub { overflow-x: auto; scrollbar-width: none; }
	.brs-sub::-webkit-scrollbar { display: none; }
	.brs-grid--3,
	.brs-grid--4,
	.brs-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.brs-featured { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.brs-slider { --brs-gap: 16px; }
	.brs-slider__nav.is-prev { left: 4px; }
	.brs-slider__nav.is-next { right: 4px; }

	.brs-featured__hero { min-height: 0; aspect-ratio: 4 / 3; }
	.brs-weekly__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brs-inv { grid-template-columns: minmax(0, 1fr); }
	.brs-foot { position: static; flex-wrap: wrap; gap: 12px; height: auto; padding: 18px var(--brs-side) 22px; background: #0d0d0d; }
	.brs-news { flex-basis: 100%; width: 100%; }

	.brs-foot__right { margin-left: 0; }
	body.brs .wd-content-layout { padding-bottom: 40px !important; }
}

@media (max-width: 640px) {
	.brs-bar { padding: 0 8px; height: 60px; }
	.brs-logo__mark { width: 42px; height: 34px; }
	.brs-main__tab { padding: 0 12px; }
	.brs-tools { gap: 6px; }
	.brs-tools > a.brs-tool:not(:last-child),
	.brs-tools > a.is-square { display: none; }
	.brs-notes { right: -40px; width: min(92vw, 420px); }
	.brs-sub { flex-wrap: wrap; gap: 8px; height: auto; padding: 8px; overflow: visible; }
	.brs-shop { flex: 1 1 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; }
	.brs-shop::-webkit-scrollbar { display: none; }
	.brs-shop__cats { gap: 6px; }
	.brs-find { flex: 1 1 100%; gap: 8px; margin-left: 0; }
	.brs-search { flex: 1; width: auto; }
	.brs-head__txt { flex: 1 1 calc(100% - 80px); }
	.brs-head .brs-refresh { margin-left: 78px; }
	.brs-head .brs-head__more { margin-left: 78px; }
	.brs-summary__sec .brs-head__title { font-size: 24px !important; }
	.brs-card--featured,
	.brs-card--plain,
	.brs-shelf--limited .brs-grid--3 .brs-card { aspect-ratio: 1 / 1.08; }
	.brs-card--featured .brs-card__media,
	.brs-card--plain .brs-card__media,
	.brs-shelf--limited .brs-grid--3 .brs-card__media { inset: 52px 14px auto; height: 48%; }
	.brs-grid--3,
	.brs-grid--4,
	.brs-grid--6,
	.brs-weekly__grid { grid-template-columns: minmax(0, 1fr); }
	.brs-head__title { font-size: 26px !important; }
	.brs-head { flex-wrap: wrap; }
	.brs-weekly__head { flex-direction: column; align-items: flex-start; padding: 20px; }
	.brs-weekly__title { font-size: 30px !important; }
	.brs-weekly__grid { padding: 0 20px 16px; }
	.brs-craft__title { font-size: 32px !important; }
}

/* =========================================== Headings outside the shelves */

body.brs .main-page-wrapper > .brs-head {
	margin: 0;
	padding: 40px var(--brs-side) 0;
}

body.brs .main-page-wrapper > .brs-head + .wd-content-layout { padding-top: 28px !important; }

/* ============================ The plugin's product page, in the game's look */

body.brs .bgp {
	--bgp-accent: #cf9c42;
	--bgp-accent-strong: #ddaa4e;
	--bgp-text: #cfc9c2;
	--bgp-muted: #8c8781;
	--bgp-line: rgba(255, 255, 255, .06);
	--bgp-line-strong: rgba(255, 255, 255, .1);
	--bgp-card: #222;
	--bgp-flat: #1d1d1d;
	--bgp-radius: 0px;
	max-width: none;
	padding: 0 0 40px;
	font-family: var(--brs-font);
}

body.brs .bgp-title {
	color: #f1ebe3;
	font-family: var(--brs-font);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

body.brs .bgp-ver { border-radius: 0; background: #2a2a2a; color: var(--brs-gold); }
body.brs .bgp-cats a { border-radius: 0; background: var(--brs-red-tag); color: #f4d6c9; }
body.brs .bgp-cats a:hover { background: var(--brs-red); }
body.brs .bgp-head-price { font-family: var(--brs-font); }
body.brs .bgp-tags a,
body.brs .bgp-chips a,
body.brs .bgp-chips span { border-radius: 0 !important; background: #222 !important; color: #b7afa6 !important; text-transform: uppercase; }

body.brs .bgp .bgp-tile,
body.brs .bgp-lightbox,
body.brs .bgp-mapmodal-frame { border-radius: 0; }
body.brs .bgp-tile-tag { border-radius: 0; background: #d7a648; color: #3a2a0e; }

/* The buy box: the crafting panel. */
body.brs .bgp-buy {
	border: 0;
	border-radius: 0;
	background: #262626;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

body.brs .bgp-buy::before { display: none; }
body.brs .bgp-price { color: #f1ebe3; font-family: var(--brs-font); }

/* Exclusive seal: a gold-edged strip like the game's item notes. */
body.brs .bgp-exclusive { border: 0; border-left: 4px solid var(--brs-gold); border-radius: 0; background: #1c1c1c; }
body.brs .bgp-exclusive svg { stroke: var(--brs-gold); }
body.brs .bgp-exclusive b { color: var(--brs-gold); font-family: var(--brs-font); font-size: 15px; letter-spacing: .04em; }
body.brs .bgp-exclusive small { color: #b7afa6; }

body.brs .bgp .bgp-btn,
body.brs .bgp-mapmodal .bgp-btn {
	border: 0;
	border-radius: 0;
	background: var(--brs-green);
	box-shadow: none;
	color: #e4e8d8;
	font-family: var(--brs-font);
	font-weight: 700;
	text-transform: uppercase;
}

body.brs .bgp .bgp-btn:hover { background: var(--brs-green-hi); color: #fff; filter: none; }
body.brs .bgp .bgp-btn-ghost,
body.brs .bgp-mapmodal .bgp-btn-ghost { background: #3a3a3a; color: #d9d3cc; }
body.brs .bgp .bgp-btn-3d,
body.brs .bgp .bgp-btn-support { background: var(--brs-gold); box-shadow: none; color: #4a3410; }
body.brs .bgp .bgp-btn-3d:hover,
body.brs .bgp .bgp-btn-support:hover { background: #ddaa4e; color: #3a2a0e; }

/* Light buttons with dark text never carry the comic text shadow. */
body.brs .bgp .bgp-btn-3d,
body.brs .bgp .bgp-btn-support,
body.brs .brs-weekly__all,
body.brs .bgp-tile-tag,
body.brs .bgp-tabs button span { text-shadow: none !important; }

body.brs .bgp-card,
body.brs .bgp-panel { padding: 26px 30px; border: 0; border-radius: 0; background: #222; box-shadow: none; }
@media (max-width: 640px) { body.brs .bgp-panel { padding: 18px 16px; } }

body.brs .bgp-h2 { color: #ece6de; font-family: var(--brs-font); font-weight: 700; text-transform: uppercase; }
body.brs .bgp-h2::before { border-radius: 0; background: var(--brs-red); box-shadow: none; }

/* Tabs: the store's buttons, the open one green. */
body.brs .bgp-tabs { gap: 6px; border: 0; }
body.brs .bgp .bgp-tabs button {
	height: 46px;
	padding: 0 18px;
	background: var(--brs-btn);
	color: #c9c3bc;
	font-family: var(--brs-font);
	font-weight: 700;
	text-transform: uppercase;
}

body.brs .bgp .bgp-tabs button:hover { background: var(--brs-btn-hi); color: #fff; }
body.brs .bgp .bgp-tabs button[aria-selected="true"] { background: var(--brs-green); color: #e4e8d8; }
body.brs .bgp .bgp-tabs button[aria-selected="true"]::after { display: none; }
body.brs .bgp-tabs button span { border-radius: 0; background: #d7a648; color: #3a2a0e; }

/* The cart and checkout blocks. */
body.brs .wc-block-components-product-button__button,
body.brs .wp-block-button__link,
body.brs .wc-block-cart__submit-button,
body.brs .wc-block-components-checkout-place-order-button {
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--brs-green) !important;
	color: #e4e8d8 !important;
	font-family: var(--brs-font) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

body.brs .wc-block-grid__product-title,
body.brs .wc-block-components-product-name { color: #ece6de !important; font-family: var(--brs-font); text-transform: uppercase; }
body.brs .wp-block-woocommerce-empty-cart-block h2,
body.brs .wc-block-cart__empty-cart__title { color: #d9d3cc; font-family: var(--brs-font); text-transform: uppercase; }

/* ======================================== Elementor templates of the store */

/* The store's templates are built of containers marked "brs-el": they add no
   padding, gap or margin of their own, so the widgets sit exactly as the
   theme draws them. */
.brs-el.e-con,
.brs-el .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--content-width: 100%;
	--min-height: 0px;
	padding: 0 !important;
	gap: 0 !important;
}

.brs-el .elementor-element,
.brs-el .elementor-widget { --widgets-spacing: 0px; margin: 0 !important; }
.brs-el .elementor-widget-container { margin: 0; padding: 0; }
body.brs .elementor-widget-brs_featured,
body.brs .elementor-widget-brs_products { width: 100%; }

/* In the editor the bottom bar stays in the page, where it can be clicked. */
.elementor-editor-active .brs-foot { position: relative; }

/* Elementor sizes every picture inside its templates (".elementor img":
   auto height, 100% max width); the store's pictures keep their own. */
body.brs .brs-card .brs-card__img,
body.brs .brs-item .brs-item__img,
body.brs .brs-craft .brs-craft__img { height: 100%; max-width: none; }
body.brs .brs-notes__list img { width: 64px; height: 48px; max-width: none; }
body.brs .brs-empty img { width: 128px; height: 128px; }

/* ============================================================ No gaps, ever */

/*
 * Every shelf of cards is a wrapping row whose last line stretches to fill
 * the width, so no screen, browser or number of items ever leaves an empty
 * hole at the end. The cards keep one height per shelf, worked out from the
 * shelf's own width (container units): a wider card in the last line shows
 * more of its picture, never a taller card.
 */
.brs-grid {
	--gap: 32px;
	--cols: 4;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	container-type: inline-size;
}

.brs-grid--1 { --cols: 1; }
.brs-grid--3 { --cols: 3; }
.brs-grid--4 { --cols: 4; }
.brs-grid--6 { --cols: 6; }

.brs-grid > * {
	flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .5px);
	min-width: 0;
}

.brs-grid > .brs-card {
	--r: .7562;
	aspect-ratio: auto !important;
	height: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * var(--r));
}

.brs-grid > .brs-card--tile { --r: 1.1754; }
.brs-grid > .brs-card--featured,
.brs-grid > .brs-card--plain { --r: 1.3911; }
.brs-grid > .brs-card--banner { --r: .2791; }
.brs-shelf--limited .brs-grid--3 > .brs-card { --r: .5565; }

/* The inventory: square items, the last line stretched the same way. */
.brs-grid--inv { --gap: 20px; }
.brs-grid--inv > * { flex: 1 1 230px; }
.brs-grid--inv > .brs-item { aspect-ratio: auto; height: 250px; }

@media (max-width: 1600px) {
	.brs-grid--6 { --cols: 4; }
}

@media (max-width: 1300px) {
	.brs-grid--4 { --cols: 3; }
}

@media (max-width: 1000px) {
	.brs-grid { --gap: 16px; }
	.brs-grid--3,
	.brs-grid--4,
	.brs-grid--6 { --cols: 2; }
}

@media (max-width: 640px) {
	.brs-grid--3,
	.brs-grid--4,
	.brs-grid--6 { --cols: 1; }
	.brs-grid > .brs-card--featured,
	.brs-grid > .brs-card--plain,
	.brs-shelf--limited .brs-grid--3 > .brs-card { --r: 1.08; }
}

/* ================================================================= Footer */

body.brs .wd-content-layout { padding-bottom: 60px !important; }

.brs-footer {
	position: relative;
	padding: 50px var(--brs-side) 92px; /* room for the bottom bar, no more */
	border-top: 1px solid #45312d;
	background:
		radial-gradient(45% 80% at 0% 100%, rgba(150, 40, 25, .28), transparent 70%),
		linear-gradient(180deg, #151513 0%, #0f0f0e 100%);
	color: #cfc9c2;
	font-family: var(--brs-font);
}

/* Four promises, each beside an inventory slot holding a game item. */
.brs-footer__promises {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brs-footer__promises li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 14px;
	background: #1c1b1a;
	list-style: none;
	transition: background .15s ease;
}

.brs-footer__promises li:hover { background: #242322; }

.brs-footer__slot {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(255, 255, 255, .06);
	background: linear-gradient(180deg, #3a3a3a, #2e2e2e);
}

.brs-footer__slot img { width: 56px; height: 56px; object-fit: contain; }

.brs-footer__promises li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.brs-footer__promises b {
	color: #ece6de;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-footer__promises i {
	color: #8c8781;
	font-size: 13px;
	font-style: normal;
	line-height: 1.4;
}

.brs-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin-top: 44px;
	padding-top: 40px;
	border-top: 1px solid #262626;
}

.brs-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #ece6de !important;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.brs-footer__mark {
	display: block;
	width: 56px;
	height: 45px;
	background: var(--brs-red);
	-webkit-mask: var(--brs-logo) center / contain no-repeat;
	mask: var(--brs-logo) center / contain no-repeat;
}

.brs-footer__brand p {
	max-width: 360px;
	margin: 16px 0 20px !important;
	color: #8c8781;
	font-size: 15px;
	line-height: 1.55;
}

.brs-footer__social { display: flex; gap: 8px; }
.brs-footer__social svg { display: block; width: 20px; height: 20px; color: #a9a39c; }
.brs-footer__social .brs-btn:hover svg { color: #fff; }

.brs-footer__h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px !important;
	color: #ece6de !important;
	font-family: var(--brs-font) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

.brs-footer__h .ri { color: var(--brs-red); font-size: 26px; }

.brs-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brs-footer__col li { margin: 0; list-style: none; }

/* Rows like the game's options menu. */
.brs-footer__col a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 40px;
	padding: 0 12px;
	background: #1f1f1f;
	color: #cfc9c2 !important;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .15s ease, color .15s ease;
}

.brs-footer__col a .ri { color: #8f8a85; font-size: 18px; }
.brs-footer__col a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brs-footer__col a em {
	flex: none;
	padding: 2px 7px;
	background: #d7a648;
	color: #3a2a0e;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
}

.brs-footer__col a:hover { background: #2b2b2a; color: #fff !important; }
.brs-footer__col a:hover .ri { color: #c6ceb3; }

.brs-footer__pay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
}

.brs-footer__cards { display: flex; flex-wrap: wrap; gap: 6px; }

.brs-footer__pay > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 8px;
	color: #8c8781;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.brs-footer__pay > span .ri { color: var(--brs-green-hi); font-size: 18px; }

.brs-footer__pay img {
	display: block;
	width: auto;
	height: 34px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

@media (max-width: 1300px) {
	.brs-footer__promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brs-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brs-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
	.brs-footer { padding-bottom: 30px; }
}

@media (max-width: 640px) {
	.brs-footer__promises,
	.brs-footer__main { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================= The header stays */

/* Scrolled past, the top bar and the store bar drop back in from the top
   and stay; back at the top they return to their place. */
.brs-header { position: relative; z-index: 400; }

.brs-header.is-fixed {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 600;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
	animation: brs-drop .38s cubic-bezier(.2, .8, .2, 1);
}

@keyframes brs-drop {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

@media (max-width: 640px) {
	/* On a phone only the top bar comes along; the store bar waits at the top. */
	.brs-header.is-fixed .brs-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.brs-header.is-fixed { animation: none; }
}

/* WoodMart's "back to top" button, on the right above the chat bar. */
body.brs .scrollToTop {
	right: auto !important;
	bottom: 14px !important;
	left: calc(50% - 25px) !important;
	border-radius: 0 !important;
	background: #202020 !important;
	color: #c9c3bc !important;
	transform: none !important;
}

@media (max-width: 1000px) {
	body.brs .scrollToTop { bottom: 16px !important; }
	/* Room under the legal line, so the arrow never sits on it. */
	.brs-foot { padding-bottom: 80px; }
}

/* ======================================================= Retro television */

/* Laid over the whole page, never in the way of a click. Everything is set
   in Customize > Rust store: strength (brs-tv-<level> on the body), curve of
   the screen (brs-tv-curve-<curve>) and VHS interference. */
.brs-tv {
	--tv-grain: .1;
	--tv-lines: .17;
	--tv-roll: .085;
	--tv-corner: .5;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: none;
}

.brs-tv-subtle .brs-tv { --tv-grain: .065; --tv-lines: .1; --tv-roll: .055; --tv-corner: .38; }
.brs-tv-strong .brs-tv { --tv-grain: .15; --tv-lines: .26; --tv-roll: .13; --tv-corner: .62; }

.brs-tv > * {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

/* The lens: bends the page under it (rust.js gives it its filter). */
.brs-tv .brs-tv__svg {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Film grain: a tile of noise twice the size of the screen, jumping to a new
   place many times a second (moved by the compositor, never repainted). */
.brs-tv .brs-tv__grain {
	inset: -100%;
	background: url("../img/grain.png") repeat;
	opacity: var(--tv-grain);
	animation: brs-tv-grain .5s steps(1) infinite;
	will-change: transform;
}

@keyframes brs-tv-grain {
	0%   { transform: translate(0, 0); }
	10%  { transform: translate(-7%, 4%); }
	20%  { transform: translate(5%, -9%); }
	30%  { transform: translate(-12%, -3%); }
	40%  { transform: translate(9%, 8%); }
	50%  { transform: translate(-4%, 12%); }
	60%  { transform: translate(14%, -6%); }
	70%  { transform: translate(-10%, 9%); }
	80%  { transform: translate(3%, -13%); }
	90%  { transform: translate(-15%, 2%); }
	100% { transform: translate(0, 0); }
}

/* Scan lines: drawn by rust.js bent with the curve of the tube, and crawling
   down three pixels (one line) at a time. Until the script has drawn them,
   plain straight lines stand in. */
.brs-tv .brs-tv__lines {
	top: -6px;
	bottom: auto;
	width: 100%;
	height: calc(100% + 12px);
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, var(--tv-lines)) 2px, rgba(0, 0, 0, var(--tv-lines)) 3px);
	animation: brs-tv-crawl .42s linear infinite, brs-tv-flicker 4.3s linear infinite;
	will-change: transform, opacity;
}

.brs-tv .brs-tv__lines.is-drawn { background: none; }

@keyframes brs-tv-crawl {
	0%   { transform: translateY(-3px); }
	100% { transform: translateY(0); }
}

@keyframes brs-tv-flicker {
	0%, 100% { opacity: 1; }
	47% { opacity: 1; }
	48% { opacity: .82; }
	49% { opacity: 1; }
	71% { opacity: .93; }
	72% { opacity: 1; }
	88% { opacity: .9; }
	89% { opacity: 1; }
}

/* The wide bright bar rolling down the screen, as on a tube out of sync,
   with the darker shadow that follows it. */
.brs-tv .brs-tv__roll {
	top: -34%;
	bottom: auto;
	height: 34%;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, calc(var(--tv-roll) * .8)) 18%,
		rgba(0, 0, 0, 0) 32%,
		rgba(255, 255, 255, calc(var(--tv-roll) * .5)) 52%,
		rgba(255, 255, 255, var(--tv-roll)) 74%,
		rgba(255, 255, 255, calc(var(--tv-roll) * 1.3)) 80%,
		rgba(255, 255, 255, 0) 100%);
	animation: brs-tv-roll 7s linear infinite;
	will-change: transform;
}

@keyframes brs-tv-roll {
	0%   { transform: translateY(0); }
	100% { transform: translateY(395%); }
}

/* VHS tracking interference: rust.js sends translucent bands across the
   screen. Inside a band the picture underneath is smeared and brightened,
   and its streaks of noise are redrawn many times a second. */
.brs-tv .brs-tv__vhs { inset: 0; }

.brs-tv__band {
	position: absolute;
	top: 0;
	left: -2%;
	width: 104%;
	pointer-events: none;
	-webkit-backdrop-filter: blur(1.2px) brightness(1.08) saturate(1.2);
	backdrop-filter: blur(1.2px) brightness(1.08) saturate(1.2);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	will-change: transform, opacity;
}

.brs-tv__band canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* The glass of the tube: a picture tube is a little darker towards its
   corners (drawn by rust.js; until then a gradient stands in). */
.brs-tv .brs-tv__glass {
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, var(--tv-corner)) 100%);
}

.brs-tv .brs-tv__glass.is-drawn { background: none; }

/* Parts of the television switched off in Customize > Rust store: effects. */
.brs-no-grain .brs-tv .brs-tv__grain,
.brs-no-lines .brs-tv .brs-tv__lines,
.brs-no-roll .brs-tv .brs-tv__roll { display: none; }

/* Lighter TV for devices that cannot keep up (set by rust.js). */
.brs-tv.is-lite .brs-tv__lines,
.brs-tv.is-lite .brs-tv__roll { animation: none; }
.brs-tv.is-lite .brs-tv__roll,
.brs-tv.is-lite .brs-tv__vhs { display: none; }
.brs-tv.is-still .brs-tv__grain { animation: none; }

/* Only when the owner asks for it (Customize > Rust store), visitors whose
   system asks for less motion get a still picture. */
@media (prefers-reduced-motion: reduce) {
	.brs-tv-calm .brs-tv .brs-tv__grain,
	.brs-tv-calm .brs-tv .brs-tv__lines { animation: none; }
	.brs-tv-calm .brs-tv .brs-tv__roll,
	.brs-tv-calm .brs-tv .brs-tv__vhs { display: none; }
}

@media print {
	.brs-tv { display: none; }
}

/* ================================================================= The fly */

/* A real house fly seen from above, walking on the glass: rust.js builds it
   from its parts (assets/img/fly: body, wings, legs) and moves each one. It
   sits on top of everything, the TV included, and never takes a click.
   Its size is worked out by rust.js: a real fly's size on each screen. */
.brs-flies {
	position: fixed;
	inset: 0;
	z-index: 2147483001;
	overflow: hidden;
	pointer-events: none;
}

/* The fly and its balloon are for computers only (see rust.js). */
@media not all and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.brs-flies { display: none !important; }
}

.brs-fly {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 0;
	height: 0;
	pointer-events: none;
	transform-origin: 0 0;
	will-change: transform;
}

.brs-fly__part {
	position: absolute;
	display: block;
	background: no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* Red and blue 3D (anaglyph): a red copy of the fly a little to the
   left and a cyan one a little to the right, always level on the screen;
   further apart while it flies, as it comes closer to the eye. */
.brs-fly__ana {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 0;
	height: 0;
	pointer-events: none;
	filter: drop-shadow(-.7px 0 0 rgba(255, 40, 40, .24)) drop-shadow(.7px 0 0 rgba(0, 200, 255, .2));
	transition: filter .25s ease;
}

.brs-fly__ana.is-up {
	filter: drop-shadow(-1.3px 0 0 rgba(255, 40, 40, .24)) drop-shadow(1.3px 0 0 rgba(0, 200, 255, .2));
}

/* In the air the wings beat too fast to see: a pale blur. */
.brs-fly.is-flying .brs-fly__wing-u,
.brs-fly.is-flying .brs-fly__wing-l {
	opacity: .5;
	filter: blur(1.5px);
}

/* The balloon: what the fly says while it rubs its front legs. */
.brs-fly__talk {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: 220px;
	padding: 9px 13px 8px;
	border: 0;
	border-radius: 18px;
	background: rgba(20, 20, 20, .82); /* The store's own dark, a little see-through. */
	box-shadow: none;
	color: #ffd93b;
	font-family: "BRS Bangers", "Bangers", "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.15;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	translate: 0 -100%;
	scale: .4;
	transform-origin: 14px 100%;
	transition: opacity .18s ease, scale .25s cubic-bezier(.3, 1.6, .5, 1);
	will-change: transform;
}

/* Its tail, pointing down to the fly. */
.brs-fly__talk::after {
	position: absolute;
	bottom: -12px;
	left: 16px;
	content: "";
	border-style: solid;
	border-width: 12px 11px 0 0;
	border-color: rgba(20, 20, 20, .82) transparent transparent transparent;
}

/* On the fly's left (near the right edge of the screen) the tail moves
   to the balloon's right-hand corner. */
.brs-fly__talk.is-left { transform-origin: calc(100% - 14px) 100%; }
.brs-fly__talk.is-left::after {
	right: 16px;
	left: auto;
	border-width: 12px 0 0 11px;
}

.brs-fly__talk.is-on {
	opacity: 1;
	scale: 1;
}

@media (max-width: 640px) {
	.brs-fly__talk { max-width: 180px; font-size: 15px; }
}

@media print {
	.brs-flies { display: none; }
}

/* ============================================================ TV power on */

/* Every page opens like an old television switching on: the picture opens
   from the middle of the screen in a soft-edged circle, out of the same
   dark as the store, with a faint glow. Pure CSS, so it plays even before
   the scripts load, and it is over in about a quarter of a second. Leaving
   for another page of the store, rust.js plays it the other way round: the
   circle closes into a small point of light. It never takes a click. */
@property --brs-hole {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 120%;
}

.brs-power {
	position: fixed;
	inset: 0;
	z-index: 2147483002;
	overflow: hidden;
	pointer-events: none;
	animation: brs-power-done 0s linear .26s forwards;
}

.brs-power > i {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* The dark, with a round soft-edged hole that grows from the centre. */
.brs-power__shade {
	inset: 0;
	--brs-hole: 120%;
	background: #141414;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--brs-hole) - 18%), #000 var(--brs-hole));
	mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--brs-hole) - 18%), #000 var(--brs-hole));
	animation: brs-on .2s cubic-bezier(.1, .8, .3, 1) both;
}

/* The glow of the tube warming up. */
.brs-power__glow {
	top: 50%;
	left: 50%;
	width: 60vmax;
	height: 60vmax;
	margin: -30vmax 0 0 -30vmax;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, 0) 65%);
	animation: brs-glow-on .28s ease-out both;
}

@keyframes brs-on {
	from { --brs-hole: 16%; }
	to { --brs-hole: 120%; }
}

@keyframes brs-glow-on {
	from { transform: scale(.08); opacity: 1; }
	to { transform: scale(1.6); opacity: 0; }
}

@keyframes brs-power-done {
	to { visibility: hidden; }
}

/* Switching off, on the way to another page. */
.brs-power.is-off {
	visibility: visible;
	animation: none;
}

.brs-power.is-off .brs-power__shade {
	animation: brs-off .12s cubic-bezier(.45, 0, 1, .6) both;
}

.brs-power.is-off .brs-power__glow {
	animation: brs-glow-off .14s ease-in both;
}

@keyframes brs-off {
	from { --brs-hole: 120%; }
	to { --brs-hole: 0%; }
}

/* The closing circle speeds up at the end, and the last point of light is
   gone at once instead of lingering. */
@keyframes brs-glow-off {
	0% { transform: scale(1); opacity: 0; }
	55% { transform: scale(.25); opacity: .7; }
	100% { transform: scale(.02); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.brs-tv-calm .brs-power { display: none; }
}

@media print {
	.brs-power { display: none; }
}

/* ======================================================== Comic shadows */

/* Every text of the store carries a comic-book shadow: a hard, see-through
   offset with no blur, deeper on titles. */
body.brs:not(.brs-no-comic) { text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, .6); }

body.brs:not(.brs-no-comic) :is(h1, h2, .product_title, .brs-head__title, .bgp-title) {
	text-shadow: 3px 3px 0 rgba(0, 0, 0, .6);
}

body.brs:not(.brs-no-comic) :is(h3, h4, h5, h6, .price, .woocommerce-Price-amount, .bgp-head-price, .bgp-price, .brs-card__title, .brs-main__tab) {
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}

body:not(.brs-no-comic) .brs-fly__talk { text-shadow: 2px 2px 0 rgba(0, 0, 0, .65); }

/* =========================================================== Cookie notice */

/* A store panel above the bottom bar (inc/cookies.php, rust.js). */
.brs-cookies {
	position: fixed;
	left: var(--brs-side);
	bottom: 86px;
	z-index: 320;
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(600px, calc(100vw - 2 * var(--brs-side)));
	padding: 16px 52px 16px 16px;
	background: #262626;
	border-top: 3px solid var(--brs-red);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
	color: var(--brs-text);
	animation: brs-cookies-in .35s ease-out both;
}

.brs-cookies[hidden] { display: none !important; }

@keyframes brs-cookies-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.brs-cookies__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: #1b1b1b;
	color: var(--brs-gold);
	font-size: 30px;
}

.brs-cookies__txt { flex: 1; min-width: 0; }

.brs-cookies__txt b {
	display: block;
	margin: 0 0 2px;
	color: #f1ebe3;
	font-family: var(--brs-font);
	font-size: 16px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.brs-cookies__txt p { margin: 0; color: var(--brs-mute); font-size: 14px; line-height: 1.5; }
.brs-cookies__txt a { color: var(--brs-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.brs-cookies__txt a:hover { color: #fff; }

.brs-cookies__act { flex: none; }
.brs-cookies__act .brs-btn { height: 42px; padding: 0 16px; gap: 8px; }
.brs-cookies__act .brs-btn .ri { font-size: 18px; }

.brs-cookies__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--brs-dim) !important;
	font-size: 20px;
	cursor: pointer;
}

.brs-cookies__close:hover { color: #fff !important; }

@media (max-width: 640px) {
	.brs-cookies {
		left: 12px;
		right: 12px;
		bottom: 80px;
		flex-wrap: wrap;
		width: auto;
		padding: 14px 44px 14px 14px;
	}
	.brs-cookies__icon { width: 42px; height: 42px; font-size: 24px; }
	.brs-cookies__txt { flex: 1 1 calc(100% - 58px); }
	.brs-cookies__act { flex: 1 1 100%; }
	.brs-cookies__act .brs-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.brs-cookies { animation: none; }
}

/* ================================================================ Pager */

/* Under a category's cards (brs_pagination): the store's square buttons, the
   current page lit green, the game's arrows, and where you are in the shelf. */
.brs-pager {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 44px 0 0;
}

.brs-pager__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.brs-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	background: var(--brs-btn);
	color: #c9c3bc !important;
	font-family: var(--brs-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background .15s ease, color .15s ease;
}

a.brs-pager__btn:hover { background: var(--brs-btn-hi); color: #fff !important; }
.brs-pager__btn .ri { color: var(--brs-icon); font-size: 22px; }
a.brs-pager__btn:hover .ri { color: #c9c3bc; }
.brs-pager__btn.is-on { background: var(--brs-green); color: #e4e8d8 !important; }
.brs-pager__btn.is-step { padding: 0 18px; font-size: 14px; }
.brs-pager__btn.is-dots { min-width: 30px; padding: 0; background: transparent; color: var(--brs-dim) !important; }

.brs-pager__info {
	margin: 0;
	color: var(--brs-dim);
	font-family: var(--brs-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: pre;
}

@media (max-width: 640px) {
	.brs-pager__btn.is-step span { display: none; }
	.brs-pager__btn.is-step { padding: 0; width: 46px; }
}