/**
 * Collectible Live - viewer page.
 *
 * Standalone layout: the page owns the viewport rather than sitting inside the
 * theme's container, so the video, chat and product rails can fill the screen.
 */

/* Built to read like Twitch, because that is the room these viewers already know
   how to use: a dark surround so the video is the brightest thing on screen, a
   left column of things to click, the player and its details in the middle, chat
   down the right. Depth comes from steps between near-black greys rather than
   from shadows, which barely register on a dark page anyway.

   Twitch's purple is replaced by the shop's amber throughout - it is the one
   colour customers already associate with Collectible, and it carries the same
   job here that purple carries there: this is the thing to press. */
:root {
	--clive-bg: #0e0e10;
	--clive-surface: #18181b;
	--clive-surface-2: #1f1f23;
	--clive-surface-3: #26262c;
	--clive-border: #2f2f35;
	--clive-text: #efeff1;
	--clive-muted: #adadb8;
	--clive-accent: #f8ae4c;
	--clive-accent-hover: #ffc06b;
	/* Amber is a light colour, so what sits on it has to be dark. */
	--clive-accent-text: #14141a;
	--clive-band: #18181b;
	--clive-band-text: #efeff1;
	--clive-live: #eb0400;
	--clive-success: #2bd07c;
	--clive-success-soft: rgba(43, 208, 124, 0.14);
	--clive-error: #ff6b63;
	/* Twitch keeps its corners tight; anything softer stops reading as Twitch. */
	--clive-radius-sm: 4px;
	--clive-radius: 6px;
	--clive-radius-lg: 6px;
	--clive-radius-button: 4px;
	--clive-shadow: none;
	--clive-shadow-lg: none;
	--clive-gap: 0px;
	--clive-rail: 262px;
	--clive-rail-collapsed: 50px;
	--clive-chat: 340px;
	--clive-nav: 50px;
	--clive-admin-bar: 0px;
	/* The theme prints `html { background-color: #f8ae4c }` inline in the head,
	   which cannot be dequeued, and that amber shows through wherever the body
	   does not reach - on a rubber-band scroll, for one. :root outranks a bare
	   html selector, so this wins without depending on source order. */
	background: var(--clive-bg);
	color-scheme: dark;
}

/* The admin bar is fixed over the top of the viewport, so a sticky header at
   top: 0 disappears underneath it and the app shell overflows by its height. */
.admin-bar {
	--clive-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar {
		--clive-admin-bar: 46px;
	}
}

/* This page loads no theme stylesheet, so it carries its own baseline. Without
   border-box a full-width button overflows its container by its padding and
   border, which is what the theme's reset was quietly preventing. */
.clive-body,
.clive-body *,
.clive-body *::before,
.clive-body *::after {
	box-sizing: border-box;
}

.clive-body img,
.clive-body video {
	max-width: 100%;
}

/* The theme prints its customiser CSS inline in the head - `h1,h2,h3,h4,h5,h6,
   .heading-font { color: #000000 }` among it - and inline CSS cannot be
   dequeued the way the stylesheet files can. A direct match beats inheritance,
   so every heading in this app came out black, which was invisible the moment
   the page went dark. Handing the colour back to inheritance fixes all of them
   at once, and any heading added later. */
.clive-body h1,
.clive-body h2,
.clive-body h3,
.clive-body h4,
.clive-body h5,
.clive-body h6 {
	color: inherit;
}

/* The panels below set an explicit display, which beats the hidden attribute on
   its own terms, so hiding has to be stated louder than laying out. Without
   this the cart drawer and both modals cover the page from the first paint. */
.clive-body [hidden] {
	display: none !important;
}

/* Wrapped in :where() so the reset carries no more weight than `.clive-body`
   itself. As a plain descendant selector this was (0,1,1) - stronger than the
   single class on every button and field below it - so `.clive-button`'s own
   font-size never applied and every control on the page rendered at the body's
   15px. That is also what pushed the three bid steps past the width of a phone
   and broke them onto two rows. */
.clive-body :where(button, input, select, textarea) {
	font-family: inherit;
	font-size: 100%;
}

.clive-body {
	margin: 0;
	background: var(--clive-bg);
	color: var(--clive-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.clive-body.clive-modal-open {
	overflow: hidden;
}

/* One focus treatment everywhere, only for keyboard users, so nothing relies
   on the browser default ring sitting awkwardly against a rounded edge. */
.clive-body :focus-visible {
	outline: 2px solid var(--clive-accent);
	outline-offset: 2px;
	border-radius: inherit;
}

.clive-body ::selection {
	background: rgba(248, 174, 76, 0.3);
}

/* WooCommerce puts screen-reader text inside the price markup it hands us - a
   sale price arrives as "3.299,00 kr Opprinnelig pris var: 3.599,00 kr." This
   page drops the theme's stylesheet, which is what normally hides that class, so
   without this the note renders visibly and spills out of the card. Standard
   WordPress definition: out of view, still read aloud. */
.clive-body .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Slim scrollbars: three panes each with their own scroll looks busy with the
   platform default. */
.clive-side-scroll,
.clive-stage,
.clive-chat-messages,
.clive-drawer-items,
.clive-shop-cats {
	scrollbar-width: thin;
	scrollbar-color: #46464f transparent;
}

.clive-side-scroll::-webkit-scrollbar,
.clive-stage::-webkit-scrollbar,
.clive-chat-messages::-webkit-scrollbar,
.clive-drawer-items::-webkit-scrollbar,
.clive-shop-cats::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.clive-side-scroll::-webkit-scrollbar-thumb,
.clive-stage::-webkit-scrollbar-thumb,
.clive-chat-messages::-webkit-scrollbar-thumb,
.clive-drawer-items::-webkit-scrollbar-thumb,
.clive-shop-cats::-webkit-scrollbar-thumb {
	background: #46464f;
	border-radius: 8px;
}

.clive-side-scroll::-webkit-scrollbar-track,
.clive-stage::-webkit-scrollbar-track,
.clive-chat-messages::-webkit-scrollbar-track,
.clive-drawer-items::-webkit-scrollbar-track,
.clive-shop-cats::-webkit-scrollbar-track {
	background: transparent;
}

.clive-app {
	display: flex;
	flex-direction: column;
	/* The admin bar is fixed over the top of the viewport, and the theme cancels
	   the margin WordPress adds to make room for it, so the app carries that
	   offset itself. It belongs here rather than only on the sticky header: a
	   sticky element whose resting place is above its own top offset gets pushed
	   down and overlaps whatever follows it, which is what put the top bar over
	   the first line of the left rail. With the padding in place the header
	   starts exactly at its offset, so sticky does nothing until you scroll. */
	padding-top: var(--clive-admin-bar);
	min-height: 100vh;
	min-height: 100dvh;
}

/* On a wide screen this is a fixed app shell: the rails, the stage and the chat
   each scroll on their own and the page itself does not. On a phone the page
   scrolls normally instead, which is what the tab layout expects. */
@media (min-width: 901px) {
	.clive-app {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}
}

.clive-head {
	position: sticky;
	top: var(--clive-admin-bar);
	z-index: 20;
	flex-shrink: 0;
}

/* The shell is the scroll container on a wide screen and never scrolls, so there
   is nothing for the header to stick to. Left sticky, its offset is measured
   from the shell's content box - which already sits below the admin bar - and
   the bar is pushed down a second time, over the first line of the left rail.
   On a phone the document scrolls and sticky earns its keep. */
@media (min-width: 901px) {
	.clive-head {
		position: static;
	}
}

/* -------------------------------------------------------------- top bar */

/* Twitch's nav is a thin dark strip that never scrolls away: brand at the left,
   account actions at the right, and nothing in it competing with the video. */
.clive-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Not a fixed height: on a phone the row wraps, and a fixed height let the
	   wrapped actions spill out of the bar and over the tab strip below it. */
	min-height: var(--clive-nav);
	padding: 6px 16px;
	background: var(--clive-band);
	color: var(--clive-band-text);
	border-bottom: 1px solid var(--clive-border);
}

/* Shop names can be a full sentence. Keep it from taking the whole bar. */
.clive-brand {
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--clive-accent);
	text-decoration: none;
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 0;
}

.clive-topbar-actions {
	margin-left: auto;
}

.clive-badge {
	background: var(--clive-live);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	border-radius: 6px;
}

.clive-viewers,
.clive-connection {
	font-size: 12px;
	color: var(--clive-muted);
}

.clive-connection.is-connected::before,
.clive-connection.is-polling::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--clive-success);
	margin-right: 6px;
}

.clive-connection.is-connecting::before,
.clive-connection.is-offline::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--clive-live);
	margin-right: 6px;
}

.clive-topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.clive-user {
	font-size: 13px;
	color: var(--clive-muted);
}

.clive-cart-count {
	display: inline-block;
	min-width: 18px;
	margin-left: 6px;
	padding: 1px 5px;
	border-radius: 9px;
	background: var(--clive-accent);
	color: var(--clive-accent-text);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

/* -------------------------------------------------------------- buttons */

/* Twitch's default button is a filled grey block, not an outline: on a dark page
   a hairline border reads as nothing at all. */
.clive-button {
	appearance: none;
	border: 1px solid transparent;
	background: var(--clive-surface-3);
	color: var(--clive-text);
	border-radius: var(--clive-radius-button);
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
	/* Stated rather than inherited: themes routinely set a margin, a tall line
	   height and uppercasing on the bare button element. */
	margin: 0;
	min-height: 0;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	vertical-align: middle;
}

.clive-button:hover:not(:disabled) {
	background: #35353d;
}

.clive-button:active:not(:disabled) {
	transform: translateY(1px);
}

.clive-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.clive-button-primary {
	background: var(--clive-accent);
	border-color: var(--clive-accent);
	color: var(--clive-accent-text);
}

.clive-button-primary:hover:not(:disabled) {
	background: var(--clive-accent-hover);
	border-color: var(--clive-accent-hover);
}

.clive-button-ghost {
	background: transparent;
	border-color: var(--clive-border);
	color: var(--clive-text);
	text-decoration: none;
}

.clive-button-ghost:hover:not(:disabled) {
	background: var(--clive-surface-2);
}

.clive-button-block {
	display: block;
	width: 100%;
}

.clive-link {
	background: none;
	border: 0;
	color: var(--clive-muted);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}

/* --------------------------------------------------------------- layout */

.clive-tabs {
	display: none;
}

/* Three columns hard against each other, no page gutter: Twitch gives the player
   every pixel it can and separates the columns with a one-pixel line instead of
   with air. */
.clive-layout {
	display: grid;
	grid-template-columns: var(--clive-rail) minmax(0, 1fr) var(--clive-chat);
	flex: 1;
	min-height: 0;
	background: var(--clive-bg);
}

/* Collapsed, the sidebar keeps only the thumbnails, the way Twitch keeps only
   the avatars. The column narrows rather than disappearing, so the products stay
   one click away instead of being gone. */
@media (min-width: 901px) {
	.clive-layout.is-side-collapsed {
		grid-template-columns: var(--clive-rail-collapsed) minmax(0, 1fr) var(--clive-chat);
	}

	.clive-layout.is-chat-collapsed {
		grid-template-columns: var(--clive-rail) minmax(0, 1fr) var(--clive-rail-collapsed);
	}

	.clive-layout.is-side-collapsed.is-chat-collapsed {
		grid-template-columns: var(--clive-rail-collapsed) minmax(0, 1fr) var(--clive-rail-collapsed);
	}

	/* A show with nothing listed still keeps the product rail so the empty
	   state ("coming later this stream") is readable. */
	.clive-layout.is-shop-empty .clive-side {
		display: flex;
	}
}

/* min-width matters as much as min-height: without it a wide card or a long
   word widens the column instead of scrolling inside it. */
.clive-side,
.clive-stage,
.clive-chat {
	min-height: 0;
	min-width: 0;
}

.clive-stage {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-width: 0;
}

/* The stage is a scrolling column, so nothing inside it should trade away height
   when the content is taller than the view. Without this the rails, which carry
   min-height: 0, were shrunk by the flex algorithm - the buy-now rail collapsed
   to zero height and its contents drew straight over the section below it. The
   player states this for itself, for the same reason. */
.clive-stage > * {
	flex-shrink: 0;
}

.clive-rail-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--clive-muted);
	margin: 0 0 12px;
}

.clive-empty {
	margin: auto;
	text-align: center;
	padding: 80px 20px;
}

.clive-empty-note {
	color: var(--clive-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------- video */

/* Edge to edge and square-cornered, as on Twitch: the player is the page, not a
   card sitting on it. Always keep a true 16:9 box — a bare max-height with
   width:100% made the frame wider than 16:9 and left black bars beside the
   stream inside Cloudflare's player. */
.clive-video {
	position: relative;
	width: min(100%, calc(56dvh * 16 / 9));
	aspect-ratio: 16 / 9;
	max-height: 56dvh;
	margin-inline: auto;
	flex-shrink: 0;
	background: #000;
	overflow: hidden;
}

.clive-video iframe,
.clive-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.clive-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clive-muted);
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

/* ------------------------------------------- side rail: the product list */

/* This is Twitch's channel list, holding products instead of channels. Same
   shape and the same reason for the shape: a dense scrollable column of things
   worth clicking, thumbnail and two lines of text each, so a viewer can see what
   is coming without taking their eyes far from the stream. */
.clive-side {
	display: flex;
	flex-direction: column;
	background: var(--clive-surface);
	border-right: 1px solid var(--clive-border);
}

.clive-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 8px 8px 16px;
	flex-shrink: 0;
}

.clive-side-heading {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--clive-text);
	white-space: nowrap;
	overflow: hidden;
}

/* The collapse control, as on Twitch: a chevron in a square hit area that turns
   the column into a strip of thumbnails. */
.clive-side-toggle,
.clive-chat-toggle {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border: 0;
	border-radius: var(--clive-radius-sm);
	background: none;
	color: var(--clive-muted);
	cursor: pointer;
	padding: 0;
}

.clive-side-toggle:hover,
.clive-chat-toggle:hover {
	background: var(--clive-surface-2);
	color: var(--clive-text);
}

.clive-side-chevron {
	width: 7px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.clive-side-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 12px;
}

.clive-side-section {
	margin-bottom: 6px;
}

.clive-side-title {
	margin: 0;
	padding: 10px 16px 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--clive-muted);
}

/* One product. Twitch's row is avatar, name, category, and a live count on the
   right; this is thumbnail, name, price, and the action on the right. */
.clive-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 12px 7px 16px;
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
}

.clive-row:hover {
	background: var(--clive-surface-2);
}

.clive-row-thumb {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: var(--clive-radius-sm);
	object-fit: cover;
	background: var(--clive-surface-3);
}

.clive-row-body {
	flex: 1;
	min-width: 0;
}

/* Twitch's rows are one line because channel names are short. Product names run
   to half a sentence - "[Rip & Ship Exclusive] One Piece Japanese OP01" - and a
   single line cut them off before anything identifying, so they get two. */
.clive-row-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--clive-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clive-row-meta {
	margin: 0;
	font-size: 12px;
	color: var(--clive-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clive-row-side {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* The lot on air, marked the way Twitch marks a channel that is live. */
.clive-row.is-live .clive-row-thumb {
	box-shadow: 0 0 0 2px var(--clive-live);
}

.clive-row-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--clive-live);
	flex-shrink: 0;
}

.clive-row-buy {
	padding: 4px 10px;
	font-size: 12px;
}

.clive-row.is-sold-out {
	opacity: 0.5;
}

/* "Show More", at the foot of the list. */
.clive-side-more {
	display: block;
	width: calc(100% - 32px);
	margin: 8px 16px 0;
	padding: 7px;
	background: var(--clive-surface-2);
	border: 0;
	border-radius: var(--clive-radius-sm);
	color: var(--clive-accent);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.clive-side-more:hover {
	background: var(--clive-surface-3);
}

.clive-side-empty {
	margin: 12px 16px 20px;
	padding: 16px;
	background: var(--clive-surface-2);
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius);
}

.clive-side-empty-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--clive-text);
}

.clive-side-empty-text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--clive-muted);
}

.clive-side-empty .clive-button {
	font-size: 13px;
}

/* Collapsed: thumbnails only, centred, everything else out of the way. */
@media (min-width: 901px) {
	.is-side-collapsed .clive-side-heading,
	.is-side-collapsed .clive-row-body,
	.is-side-collapsed .clive-row-side,
	.is-side-collapsed .clive-side-title,
	.is-side-collapsed .clive-side-more,
	.is-side-collapsed .clive-side-empty {
		display: none;
	}

	.is-side-collapsed .clive-side-head {
		padding: 12px 10px 8px;
		justify-content: center;
	}

	.is-side-collapsed .clive-row {
		justify-content: center;
		padding: 6px 8px;
	}

	.is-side-collapsed .clive-side-toggle .clive-side-chevron {
		transform: rotate(-135deg);
	}
}

/* --------------------------------------------- info bar under the player */

/* Status under the player: connection only. */
.clive-info {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--clive-border);
	min-height: 36px;
}

.clive-info .clive-connection {
	font-size: 13px;
	font-weight: 600;
}

/* -------------------------------------------------------------- auction */

/* The bid buttons get a row of their own across the full panel. Beside the
   thumbnail they only had about 230px to share, so three steps wrapped onto
   three lines, the panel grew by a hundred-odd pixels and pushed the buy-now
   row clean off the bottom of the stage. */
.clive-auction {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"media body"
		"actions actions"
		"note note";
	gap: 12px 16px;
	/* A raised strip directly under the info bar rather than a floating card:
	   the panel belongs to the stream above it, and on this page it is the one
	   thing that should catch the eye after the video. */
	background: var(--clive-surface);
	border-bottom: 1px solid var(--clive-border);
	border-left: 3px solid var(--clive-accent);
	padding: 16px 20px;
}

.clive-auction-media {
	grid-area: media;
}

.clive-auction-body {
	grid-area: body;
}

.clive-bid-actions {
	grid-area: actions;
}

.clive-auction-note {
	grid-area: note;
}

.clive-auction-media img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--clive-radius-sm);
	background: var(--clive-surface-2);
}

.clive-auction-title {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.3;
}

.clive-auction-figures {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

/* A long bidder name should wrap inside its own column, not shove the timer
   out of the panel. */
.clive-figure {
	min-width: 0;
}

.clive-figure-value {
	overflow-wrap: anywhere;
}

.clive-figure-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--clive-muted);
}

.clive-figure-value {
	display: block;
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.clive-figure-timer .clive-figure-value.is-urgent {
	color: var(--clive-live);
}

.clive-bid-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Basis of 0 so the three bid steps share the row evenly, rather than each
   taking the width of its own label. */
.clive-bid-button {
	flex: 1 1 0;
	/* Let the label set the floor instead of a guessed number: the amount never
	   breaks across two lines, and the row wraps only when it genuinely cannot
	   hold all three steps. A fixed 120px was 3px too wide for the narrow end of
	   the desktop range, and 108px split "By 5.075,00 kr" over two lines. */
	min-width: max-content;
	white-space: nowrap;
}

.clive-leading {
	background: var(--clive-success-soft);
	border: 1px solid var(--clive-success);
	color: var(--clive-success);
	border-radius: var(--clive-radius);
	padding: 10px 14px;
	font-weight: 600;
	text-align: center;
}

.clive-auction-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--clive-muted);
}

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

/* Used by the browse-the-shop grid. Twitch's stream cards are flat tiles that
   lift on hover, so these do the same. */
.clive-card {
	display: flex;
	gap: 12px;
	background: var(--clive-surface);
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.clive-card:hover {
	border-color: #43434b;
	transform: translateY(-2px);
}

.clive-card.is-sold-out {
	opacity: 0.5;
}

.clive-card.is-sold-out:hover {
	box-shadow: var(--clive-shadow);
	transform: none;
}

.clive-card-image {
	width: 76px;
	height: 76px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--clive-surface-2);
}

.clive-card-body {
	padding: 10px 12px 12px 0;
	min-width: 0;
	flex: 1;
}

.clive-card-title {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clive-card-price {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--clive-accent);
}

/* WooCommerce wraps amounts in .amount / <bdi>; theme rules often paint those
   black for light shop pages, which vanishes on this dark surface. */
.clive-app .clive-card-price,
.clive-app .clive-card-price .amount,
.clive-app .clive-card-price .woocommerce-Price-amount,
.clive-app .clive-card-price bdi,
.clive-app .clive-slot-price,
.clive-app .clive-slot-price .amount,
.clive-app .clive-slot-price .woocommerce-Price-amount,
.clive-app .clive-slot-price bdi,
.clive-app .clive-cart-meta .amount,
.clive-app .clive-cart-meta .woocommerce-Price-amount,
.clive-app .clive-cart-meta bdi,
.clive-app .clive-cart-price,
.clive-app .clive-cart-price .amount,
.clive-app .clive-cart-price .woocommerce-Price-amount,
.clive-app .clive-cart-price bdi,
.clive-app .clive-win-row strong .amount,
.clive-app .clive-win-row strong .woocommerce-Price-amount,
.clive-app .clive-win-row strong bdi,
.clive-app [data-clive-cart-total] .amount,
.clive-app [data-clive-cart-total] .woocommerce-Price-amount,
.clive-app [data-clive-cart-total] bdi {
	color: var(--clive-accent);
}

/* A sale price arrives as <del> old <ins> new, and the browser underlines an
   <ins> by default, which made the new price look like a link. The old price
   keeps its line through, quietly. */
.clive-card-price ins,
.clive-auction-body ins {
	text-decoration: none;
	background: none;
	color: var(--clive-accent);
}

.clive-card-price del,
.clive-auction-body del,
.clive-app .clive-card-price del,
.clive-app .clive-card-price del .amount,
.clive-app .clive-card-price del bdi {
	color: var(--clive-muted);
	font-weight: 600;
}

.clive-card-meta {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--clive-muted);
}

/* ----------------------------------------------------- rest of the shop */

.clive-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.clive-shop {
	margin: 0 0 8px;
	border-top: 1px solid var(--clive-border);
	border-bottom: 1px solid var(--clive-border);
	background: linear-gradient(180deg, var(--clive-surface) 0%, var(--clive-bg) 100%);
}

.clive-shop-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	background: none;
	border: 0;
	padding: 16px 20px;
	cursor: pointer;
	text-align: left;
	color: inherit;
}

.clive-shop-toggle:hover {
	background: rgba(255, 255, 255, 0.03);
}

.clive-shop-toggle-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.clive-shop-toggle .clive-rail-title {
	margin: 0;
	font-size: 16px;
}

.clive-shop-toggle-hint {
	font-size: 12px;
	color: var(--clive-muted);
	font-weight: 500;
}

.clive-shop-chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--clive-muted);
	border-bottom: 2px solid var(--clive-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	flex-shrink: 0;
}

.clive-shop-toggle.is-open .clive-shop-chevron {
	transform: rotate(225deg);
}

.clive-shop-body {
	padding: 0 20px 24px;
}

.clive-shop-toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0 0 12px;
	background: linear-gradient(180deg, var(--clive-surface) 70%, transparent);
}

.clive-shop-search {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.clive-shop-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius-sm);
	background: var(--clive-surface-3);
	color: var(--clive-text);
	padding: 11px 14px;
	font-size: 14px;
}

.clive-shop-search input[type="search"]::placeholder {
	color: var(--clive-muted);
}

.clive-shop-search input[type="search"]:focus {
	outline: none;
	border-color: var(--clive-accent);
	box-shadow: 0 0 0 3px rgba(248, 174, 76, 0.18);
}

.clive-shop-search .clive-button {
	flex-shrink: 0;
	padding-inline: 16px;
}

/* A store can have a lot of categories, so the row scrolls sideways rather
   than growing into a wall of chips above the products. */
.clive-shop-cats {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.clive-shop-cat {
	flex-shrink: 0;
	background: var(--clive-surface-2);
	border: 1px solid var(--clive-border);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var(--clive-text);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.clive-shop-cat:hover {
	border-color: var(--clive-accent);
}

.clive-shop-cat.is-active {
	background: var(--clive-accent);
	color: var(--clive-accent-text);
	border-color: var(--clive-accent);
}

.clive-shop-cat.is-child {
	font-weight: 500;
	color: var(--clive-muted);
}

.clive-shop-cat.is-child.is-active {
	color: var(--clive-accent-text);
}

.clive-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 14px;
}

.clive-shop-card {
	flex-direction: column;
	background: var(--clive-surface-2);
	height: 100%;
}

.clive-shop-card-media {
	display: block;
	background: var(--clive-surface-3);
}

.clive-shop-card .clive-card-image {
	width: 100%;
	height: 150px;
	display: block;
}

.clive-shop-card .clive-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	flex: 1;
}

.clive-shop-card .clive-card-title {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
}

.clive-shop-card .clive-card-title a {
	color: inherit;
	text-decoration: none;
}

.clive-shop-card .clive-card-title a:hover {
	color: var(--clive-accent);
}

.clive-shop-card .clive-card-price {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--clive-accent);
}

.clive-shop-card .clive-button {
	margin-top: auto;
	font-size: 13px;
}

.clive-shop-empty {
	grid-column: 1 / -1;
	padding: 28px 16px;
	text-align: center;
	background: var(--clive-surface-2);
	border: 1px dashed var(--clive-border);
	border-radius: var(--clive-radius);
}

.clive-shop-empty-title {
	margin: 0;
	font-size: 14px;
	color: var(--clive-muted);
	line-height: 1.45;
}

.clive-shop-more {
	margin-top: 16px;
	width: 100%;
	max-width: 280px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 900px) {
	.clive-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.clive-shop-card .clive-card-image {
		height: 120px;
	}

	.clive-shop-body {
		padding: 0 14px 20px;
	}

	.clive-shop-toggle {
		padding: 14px;
	}
}

/* ------------------------------------------------------------ slot grid */

.clive-slots-panel {
	padding: 14px 20px;
	border-bottom: 1px solid var(--clive-border);
}

.clive-slots-lot + .clive-slots-lot {
	margin-top: 16px;
}

.clive-slots-title {
	margin: 0 0 8px;
	font-size: 15px;
}

.clive-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 6px;
	margin-bottom: 8px;
}

.clive-slot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius-sm);
	transition: border-color 0.15s ease, background 0.15s ease;
	background: var(--clive-surface-2);
	color: var(--clive-text);
	cursor: pointer;
	font-size: 12px;
	text-align: left;
}

.clive-slot:hover:not(:disabled) {
	border-color: var(--clive-accent);
}

.clive-slot.is-taken {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.clive-slot-price {
	font-weight: 700;
}

/* ----------------------------------------------------------------- wins */

.clive-wins {
	background: var(--clive-surface);
	border-top: 1px solid var(--clive-border);
	padding: 16px 20px;
}

.clive-win-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13px;
}

.clive-win-row img {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	object-fit: cover;
}

.clive-win-row span {
	flex: 1;
	min-width: 0;
}

.clive-win-total {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--clive-border);
	font-weight: 700;
}

/* ----------------------------------------------------------------- chat */

/* Twitch's chat column: its own panel with a titled header, a dense log and the
   input pinned to the foot. Full height, flush against the stage, no rounding -
   the column is a wall of the room, not a card in it. */
.clive-chat {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--clive-surface);
	border-left: 1px solid var(--clive-border);
}

.clive-chat-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--clive-border);
	flex-shrink: 0;
}

.clive-chat-heading {
	flex: 1;
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--clive-text);
}

.clive-chat-toggle .clive-side-chevron {
	transform: rotate(-135deg);
}

.clive-chat-pinned {
	padding: 10px 14px;
	background: rgba(248, 174, 76, 0.16);
	border-bottom: 1px solid var(--clive-border);
	border-left: 3px solid var(--clive-accent);
	font-size: 13px;
	flex-shrink: 0;
}

.clive-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 10px 10px 6px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	overscroll-behavior: contain;
	/* A log held at the newest message nearly always has a half-line at the top
	   edge. Fading it reads as more content above, where a hard cut reads as
	   text that has been sliced through. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}

/* Holds a quiet chat down by the input instead of leaving it stranded at the
   top. An auto margin on a spacer rather than justify-content: flex-end, which
   can make the earliest messages unreachable once the log overflows. */
.clive-chat-messages::before {
	content: "";
	margin-top: auto;
}

/* A pasted link with no spaces in it would otherwise run straight out of the
   column. */
.clive-message {
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	min-width: 0;
	/* Twitch gives each line a hover state and a little breathing room, which is
	   what makes a fast chat readable rather than a block of text. */
	padding: 4px 6px;
	border-radius: var(--clive-radius-sm);
}

.clive-message:hover {
	background: var(--clive-surface-2);
}

/* Twitch writes "Name: message" on one line and colours the name per chatter,
   which is how you follow a conversation at speed. The colour is picked in the
   client from the name itself, so the same person is the same colour for
   everyone watching, without the server having to store anything. */
.clive-message-name {
	font-weight: 700;
	color: var(--clive-accent);
}

.clive-message-name::after {
	content: ":";
	color: var(--clive-text);
	font-weight: 400;
	margin-right: 5px;
}

.clive-message.is-mod .clive-message-name::before {
	content: "⬧";
	color: var(--clive-success);
	margin-right: 4px;
	font-weight: 400;
}

.clive-message.is-system .clive-message-body,
.clive-message.is-sold .clive-message-body {
	display: block;
	padding: 7px 11px;
	border-radius: var(--clive-radius-sm);
	background: var(--clive-surface-2);
	color: var(--clive-muted);
	font-size: 12px;
}

.clive-message.is-sold .clive-message-body {
	background: var(--clive-success-soft);
	color: var(--clive-success);
	font-weight: 600;
}

/* Twitch stacks the input and its send button: the field runs the full width of
   the column and the button sits under it, pushed right. */
.clive-chat-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	flex-shrink: 0;
}

.clive-chat-form input[type="text"] {
	width: 100%;
	min-width: 0;
	background: var(--clive-surface-3);
	border: 2px solid transparent;
	border-radius: var(--clive-radius-sm);
	padding: 9px 10px;
	color: var(--clive-text);
	font-size: 14px;
}

.clive-chat-form input[type="text"]::placeholder {
	color: var(--clive-muted);
}

.clive-chat-form input[type="text"]:focus {
	outline: none;
	border-color: var(--clive-accent);
	background: var(--clive-surface-2);
}

.clive-chat-send {
	display: flex;
	justify-content: flex-end;
}

/* Collapsed, the chat leaves a strip with the reopen control in it, as Twitch
   does. Nothing is unmounted, so the log keeps filling in the background and is
   already current when it comes back. */
@media (min-width: 901px) {
	.is-chat-collapsed .clive-chat-heading,
	.is-chat-collapsed .clive-chat-pinned,
	.is-chat-collapsed .clive-chat-messages,
	.is-chat-collapsed .clive-chat-form {
		display: none;
	}

	.is-chat-collapsed .clive-chat-head {
		justify-content: center;
		border-bottom: 0;
	}

	.is-chat-collapsed .clive-chat-toggle .clive-side-chevron {
		transform: rotate(45deg);
	}
}

.clive-chat-error {
	flex-basis: 100%;
	margin: 0;
	font-size: 12px;
	color: var(--clive-error);
}

/* --------------------------------------------------------------- toasts */

.clive-toasts {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 60;
	pointer-events: none;
}

.clive-toast {
	background: var(--clive-surface-3);
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius);
	padding: 10px 16px;
	font-size: 14px;
	color: var(--clive-text);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.clive-toast.is-success {
	border-color: var(--clive-success);
}

.clive-toast.is-warning {
	border-color: var(--clive-live);
}

.clive-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
}

/* --------------------------------------------------------------- modals */

.clive-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 50;
}

.clive-modal-panel {
	position: relative;
	background: var(--clive-surface);
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius-lg);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
	padding: 24px;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
}

.clive-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	color: var(--clive-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.clive-modal-title {
	margin: 0 0 16px;
	font-size: 18px;
}

.clive-modal-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
}

.clive-modal-tab {
	flex: 1;
	background: var(--clive-surface-2);
	border: 1px solid var(--clive-border);
	color: var(--clive-muted);
	border-radius: var(--clive-radius-sm);
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.clive-modal-tab.is-active {
	background: var(--clive-accent);
	border-color: var(--clive-accent);
	color: var(--clive-accent-text);
}

.clive-modal-panel label {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
}

.clive-modal-panel label span {
	display: block;
	margin-bottom: 4px;
	color: var(--clive-muted);
}

.clive-modal-panel input[type="text"],
.clive-modal-panel input[type="email"],
.clive-modal-panel input[type="password"] {
	width: 100%;
	background: var(--clive-surface-2);
	border: 1px solid var(--clive-border);
	border-radius: var(--clive-radius-sm);
	padding: 10px 12px;
	color: var(--clive-text);
	font-size: 15px;
}

.clive-turnstile {
	margin-bottom: 12px;
}

.clive-form-error {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--clive-error);
}

.clive-form-note {
	margin: 12px 0 0;
	font-size: 12px;
	text-align: center;
}

.clive-form-note a {
	color: var(--clive-muted);
}

.clive-card-current {
	background: var(--clive-surface-2);
	border-radius: var(--clive-radius-sm);
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 13px;
}

/* --------------------------------------------------------------- drawer */

.clive-drawer {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: flex-end;
	z-index: 55;
}

.clive-drawer-panel {
	background: var(--clive-surface);
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	border-radius: var(--clive-radius-lg) 0 0 var(--clive-radius-lg);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

.clive-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--clive-border);
}

.clive-drawer-head h2 {
	margin: 0;
	font-size: 16px;
}

.clive-drawer-items {
	flex: 1;
	overflow-y: auto;
	padding: 12px 18px;
}

.clive-cart-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--clive-border);
}

.clive-cart-row img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

.clive-cart-row > div {
	flex: 1;
	min-width: 0;
}

.clive-cart-name {
	margin: 0;
	font-size: 13px;
}

.clive-cart-price {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 700;
}

.clive-cart-meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--clive-muted);
}

.clive-cart-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin-top: 8px;
	border: 1px solid var(--clive-border);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

.clive-cart-qty-btn {
	width: 32px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--clive-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.clive-cart-qty-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
}

.clive-cart-qty-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.clive-cart-qty-input {
	width: 40px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--clive-border);
	border-right: 1px solid var(--clive-border);
	background: transparent;
	color: var(--clive-text);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.clive-cart-qty-input::-webkit-outer-spin-button,
.clive-cart-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.clive-drawer-foot {
	padding: 16px 18px;
	border-top: 1px solid var(--clive-border);
}

.clive-drawer-total {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 15px;
}

.clive-drawer-foot .clive-button {
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	background: var(--clive-accent);
	border-color: var(--clive-accent);
	color: var(--clive-accent-text);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
	:root {
		--clive-rail: 240px;
		--clive-chat: 300px;
	}
}

@media (max-width: 900px) {
	/* The bar's contents need about 650px laid out in a row, so on a phone they
	   were not shrinking - they were pushing the whole app wider than the screen
	   and taking the tab strip and the cart button off the right edge. Let the
	   row wrap, and let the shop name give way first: it is the least useful
	   thing here, and the actions are what a viewer reaches for. */
	.clive-topbar {
		flex-wrap: wrap;
		row-gap: 8px;
		gap: 8px;
		padding: 6px 12px;
	}

	.clive-brand {
		flex-shrink: 1;
		max-width: 14ch;
		font-size: 15px;
	}

	/* Tight enough that the brand, the cart and the control-room link share one
	   row at 390px instead of wrapping onto a second one. */
	.clive-topbar .clive-button {
		padding: 7px 10px;
		font-size: 12px;
	}

	.clive-topbar-actions {
		gap: 8px;
	}

	/* The name is decorative once you are signed in, and it competes with the
	   cart and the control-room link for the little width there is. */
	.clive-user {
		display: none;
	}

	.clive-tabs {
		display: flex;
		background: var(--clive-surface);
		border-bottom: 1px solid var(--clive-border);
	}

	.clive-tab {
		flex: 1;
		background: none;
		border: 0;
		border-bottom: 2px solid transparent;
		color: var(--clive-muted);
		padding: 12px 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.clive-tab.is-active {
		color: var(--clive-text);
		border-bottom-color: var(--clive-accent);
	}

	.clive-layout {
		grid-template-columns: 1fr;
	}

	/* One column at a time, chosen by the tabs. */
	.clive-side,
	.clive-chat {
		display: none;
	}

	/* Tall enough to be usable without working out the header and tab-bar
	   heights, which is what the old fixed calculation was guessing at. */
	.clive-side.is-active,
	.clive-chat.is-active {
		display: flex;
		flex-direction: column;
		min-height: 60dvh;
		border: 0;
	}

	/* The collapse controls belong to the desktop columns; on a phone the tabs
	   do that job and a chevron beside the heading only confuses it. */
	.clive-side-toggle,
	.clive-chat-toggle {
		display: none;
	}

	/* The page scrolls on a phone, so the stage does not need its own scroller.
	   It also comes first whichever tab is open, so the player and the bid panel
	   sit at the top and the chosen tab fills the space under them. */
	.clive-stage {
		overflow: visible;
		max-width: none;
		order: -1;
	}

	/* The rest of the stream tab - the slot grids, the shop, the wins - only
	   belongs on the stream tab. The player, the info bar and the bid panel are
	   outside this and stay put. */
	.clive-stage-more:not(.is-active) {
		display: none;
	}

	.clive-info {
		padding: 8px 14px;
	}

	/* The panel stays on screen on every tab now, so every line it saves is a
	   line of chat a viewer can see while bidding.
	   
	   The thumbnail goes: the item is already on screen in the stream, and it was
	   the only thing making the panel two columns - which squeezed the figures
	   into 226px, so the countdown wrapped onto a second row and the bid steps
	   onto a third. Without it the title, the three figures and the three bid
	   steps each get the full width and one row apiece. */
	.clive-auction {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"body"
			"actions"
			"note";
		padding: 12px 14px;
		gap: 10px;
	}

	.clive-auction-media {
		display: none;
	}

	.clive-auction-title {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.clive-auction-figures {
		gap: 16px;
	}

	.clive-figure-value {
		font-size: 19px;
	}

	/* Three steps across 359px, so the padding and the gap are what decide
	   whether the row holds or breaks into two. At 10px padding the three came to
	   361px against 359 available and the last one wrapped, stretching the other
	   two to twice their width. */
	.clive-bid-actions {
		gap: 6px;
	}

	.clive-bid-button {
		padding: 9px 6px;
		font-size: 12px;
	}

	.clive-auction-note {
		margin-top: 2px;
	}
}