/* Modified 7/19/26 */
/**
 *
 * Ultimate Shop extension for the phpBB Forum Software package.
 *
 * Classic phpBB look: relies on prosilver's panels, tables and buttons.
 *
 * @copyright (c) phpBB Limited <https://www.phpbb.com>, phpBB.nl <https://www.phpbbextnl.be>, SpIdErPiGgY
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 */

/* Keep the submit input and cancel link centred on the same baseline. */
.shop-buy-confirm .submit-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.shop-buy-confirm .submit-buttons > input[type="submit"],
.shop-buy-confirm .submit-buttons > a.button {
	float: none;
	margin: 0;
	vertical-align: middle;
}

/* Wallet summary line under the header */
.shop-wallet {
	margin: 0;
}

.shop-wallet dt {
	float: left;
	width: auto;
	font-weight: bold;
}

.shop-wallet dd {
	margin-left: 0;
}

/* Category / type filter bar */
.shop-filterbar {
	margin-bottom: 12px;
}

.shop-filter-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.shop-filter-row + .shop-filter-row {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(128, 128, 128, 0.35);
}

.shop-filter-label {
	flex: 0 0 90px;
	font-weight: bold;
	font-size: 1.1em;
}

.shop-filter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.1em;
}

.shop-filter-links li {
	max-width: 100%;
}

.shop-filter-links a {
	display: block;
	padding: 3px 6px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 2px;
	overflow-wrap: anywhere;
}

.shop-filter-links a:hover,
.shop-filter-links a:focus-visible,
.shop-filter-links a.is-active {
	border-color: currentColor;
	background-color: rgba(128, 128, 128, 0.15);
}

.shop-filter-links a.is-active {
	font-weight: bold;
}

.shop-stock-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.shop-stock-form label {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

/* Inventory on the left, pagination on the right, just below search. */
.shop-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.shop-actions .pagination {
	float: none;
	margin-left: auto;
}

.shop-inventory-button {
	font-weight: bold;
}

.shop-row-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Ultra Light's hover image is shorter than long shop descriptions.
   Stretch it vertically instead of exposing its blue fallback below it.
   Other themes without a hover image keep their existing hover colour. */
.shop-list ul.topiclist li.row:hover {
	background-size: auto 100%;
}

/* Item list rows */
.shop-row .shop-row-image {
	float: left;
	margin-right: 10px;
}

.shop-row .shop-row-image img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	border: 2px solid transparent;
	border-radius: 3px;
	background-color: transparent;
	padding: 0;
	box-sizing: border-box;
}

/* Detail page: rarity text follows the rarity border colours; the
   category/type line is bold and inherits the theme colour instead of grey. */
.shop-detail-rarity.rarity-common-text { color: #c8c8c8; }
.shop-detail-rarity.rarity-rare-text { color: #2d84ff; }
.shop-detail-rarity.rarity-epic-text { color: #964cff; }
.shop-detail-rarity.rarity-legendary-text { color: #ffb52b; }

.shop-row.rarity-common .shop-row-image img {
	border-color: #c8c8c8;
}

.shop-row.rarity-rare .shop-row-image img {
	border-color: #2d84ff;
}

.shop-row.rarity-epic .shop-row-image img {
	border-color: #964cff;
}

.shop-row.rarity-legendary .shop-row-image img {
	border-color: #ffb52b;
}

.shop-row .shop-row-desc,
.shop-row .shop-row-meta {
	color: inherit;
	font-size: 1em;
	font-weight: bold;
}

.shop-soldout-note,
.shop-protected-note {
	color: #9c2727;
	font-size: 1.1em;
}

.shop-equipped-note {
	color: #8b5a00;
}

.shop-points-name {
	font-size: 1em;
	font-weight: normal;
}

/* Gift controls: button stacked above the inputs, no fieldset legend. */
.shop-gift-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin: 6px 0 0;
	border: 0;
	padding: 0;
}

.shop-gift-row .inputbox {
	margin: 0;
	max-width: 100%;
}

/* Upgrade ingredient counts */
.shop-ingredient.ok {
	color: #0b8a4b;
}

.shop-ingredient.missing {
	color: #b03030;
}

/* Item detail page */
.shop-detail-layout {
	display: table;
	width: 100%;
}

.shop-detail-image {
	display: table-cell;
	width: 260px;
	vertical-align: top;
	padding-right: 20px;
}

.shop-detail-image img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 3px;
	padding: 0;
	box-sizing: border-box;
}

.shop-detail-panel.rarity-common .shop-detail-image img {
	border-color: #c8c8c8;
}

.shop-detail-panel.rarity-rare .shop-detail-image img {
	border-color: #2d84ff;
}

.shop-detail-panel.rarity-epic .shop-detail-image img {
	border-color: #964cff;
}

.shop-detail-panel.rarity-legendary .shop-detail-image img {
	border-color: #ffb52b;
}

.shop-detail-info {
	display: table-cell;
	vertical-align: top;
}

.shop-detail-title {
	margin-bottom: 2px;
}

.shop-detail-rarity {
	font-size: 0.7em;
	font-weight: bold;
}

.shop-detail-meta {
	margin-top: 0;
	color: #ffffff;
	font-weight: bold;
}

.shop-detail-stats {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0 0 12px;
}

.shop-detail-stats dt,
.shop-detail-stats dd {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}

.shop-detail-stats dt {
	font-weight: bold;
}

/* Profile showcase (memberlist) and post mini-profile
   These classes are used by the event templates and must be kept. */
.shop-profile-panel-heading {
	margin-bottom: 10px;
}

.shop-profile-panel-heading h3 {
	margin-bottom: 4px;
}

.shop-profile-panel-heading p {
	margin: 0;
}

.shop-profile-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 12px;
}

/* Follow profile typography, not the board's heading/link defaults.
   Profile Styler's explicit !important font and colour rules still win. */
.shop-profile-panel .shop-profile-panel-heading h3,
.shop-profile-panel .shop-profile-panel-heading p,
.shop-profile-panel .shop-profile-panel-heading .button,
.shop-profile-panel .shop-profile-card,
.shop-profile-panel .shop-profile-card span {
	font-family: inherit;
}

.shop-profile-panel a.shop-profile-card,
.shop-profile-panel .shop-profile-card span {
	color: inherit;
}

.shop-profile-card {
	display: flex;
	flex-direction: column;
	flex: 0 1 180px;
	min-width: 0;
	text-align: center;
	text-decoration: none !important;
	color: inherit;
}

.shop-profile-card img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: contain;
	border-radius: 3px;
	background-color: transparent;
	border: 2px solid transparent;
	padding: 0;
	box-sizing: border-box;
}

.shop-profile-card.rarity-rare img {
	border-color: #2d84ff;
}

.shop-profile-card.rarity-epic img {
	border-color: #964cff;
}

.shop-profile-card.rarity-legendary img {
	border-color: #ffb52b;
}

.shop-profile-card span {
	margin-top: 5px;
	overflow-wrap: anywhere;
}

.profile-virtualshop {
	margin-top: 4px;
}

.profile-shop-equipped {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* 60px is as large as three of these fit on one line in the postbit column:
   3 x 60 plus two 4px gaps is 188px. Going larger wraps the third onto its
   own row. Keep this in step with shop_postbit_max_slots. */
.profile-shop-equipped-item {
	display: inline-flex;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	border-radius: 3px;
	background-color: transparent;
	overflow: hidden;
}

.profile-shop-equipped-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	padding: 0;
}

.profile-shop-equipped-item.rarity-rare {
	border-color: #2d84ff;
}

.profile-shop-equipped-item.rarity-epic {
	border-color: #964cff;
}

.profile-shop-equipped-item.rarity-legendary {
	border-color: #ffb52b;
}

.postprofile .profile-shop-equipped {
	max-width: 220px;
}

/* Alignment & width fixes: topic-list resets + scoped search bar
   --------------------------------------------------------------------------- */

.shop-list ul.topiclist > li.header {
	height: auto;
	min-height: 28px;
}

/* Reset phpBB's float/negative-margin and equal-height padding tricks for
   BOTH headers and rows. Keep these rules restricted to shop lists. */
.shop-list ul.topiclist > li > dl {
	display: table;
	width: 100%;
	table-layout: fixed;
	margin: 0;
}

.shop-list ul.topiclist > li > dl > dt,
.shop-list ul.topiclist > li > dl > dd {
	display: table-cell;
	float: none;
	vertical-align: middle;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.shop-list ul.topiclist > li > dl > dt {
	width: auto;
	text-align: left;
}

.shop-list ul.topiclist dt .list-inner {
	margin: 0;
	padding: 0;
}

.shop-list ul.topiclist > li > dl > dd.shop-col-price,
.shop-list ul.topiclist > li > dl > dd.shop-col-stock {
	width: 110px;
	text-align: center;
}

.shop-list ul.topiclist > li > dl > dd.shop-col-action {
	width: 150px;
	text-align: center;
}

/* More specific than the topiclist .list-inner reset above: keep the
   thumbnail gutter on both desktop and mobile, including inventory rows. */
.shop-list ul.topiclist > li.shop-row > dl > dt .list-inner {
	position: relative;
	min-height: 60px;
	padding-left: 72px;
}

.shop-list .shop-row .shop-row-image {
	position: absolute;
	left: 0;
	top: 0;
	float: none;
	margin: 0;
}

.shop-list .shop-col-action form + form {
	margin-top: 5px;
}

/* Compact inventory cells only; leave the shop catalogue unchanged. */
.shop-inventory-list ul.topiclist > li.shop-row > dl > dt,
.shop-inventory-list ul.topiclist > li.shop-row > dl > dd {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* The gift form provides its own 3px gap, so drop the text cell's
   5px bottom padding above it and pull the form up to the text. */
.shop-inventory-list ul.topiclist > li.shop-row > dl > dt {
	padding-bottom: 0;
}

.shop-list .shop-col-action .button {
	max-width: 100%;
	white-space: normal;
}

/* Full-width search, with the button beside the input rather than below it. */
.shop-searchbar {
	margin: 10px 0;
}

.shop-searchbar fieldset {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.shop-searchbar .inputbox {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 32px;
	margin: 0;
	box-sizing: border-box;
}

/* Placeholder ink for the one field in this extension that uses a placeholder.
 *
 * Every style on this board predates the standard selector. They ship only
 * `:-moz-placeholder` -- which Firefox dropped in 2013, so it matches nothing
 * anywhere -- and `::-webkit-input-placeholder`. ultra_light's webkit rule
 * paints #c6d5e4, a colour chosen for the dark .action-bar input.search box;
 * the generic .inputbox was later given a light #c0cedf background and the
 * placeholder colour was never revisited. That leaves 1.07:1 contrast --
 * effectively invisible -- for Chrome, Edge and Safari on the default style,
 * while Firefox matches neither rule, falls back to the UA's own 54% ink and
 * looks fine. Hence a bug only some people could see.
 *
 * Inheriting the input's own ink is what keeps this right under prosilver,
 * ultra_light and darcula at once rather than hardcoding a colour correct for
 * one of them. Two classes outrank the style's single-class webkit rule, which
 * WebKit and Blink treat as the same pseudo-element for cascading purposes.
 */
.shop-searchbar .inputbox::placeholder {
	color: inherit;
	opacity: 0.8;
}

.shop-searchbar .button {
	flex: 0 0 auto;
	height: 32px;
	box-sizing: border-box;
}

@media (max-width: 700px) {
	.shop-filter-row {
		flex-direction: column;
		gap: 4px;
	}

	.shop-filter-label {
		flex-basis: auto;
	}

	/* phpBB hides header cells with !important at this breakpoint. */
	.shop-list ul.topiclist > li.header dd {
		display: block !important;
	}

	.shop-list ul.topiclist > li > dl {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shop-list ul.topiclist > li > dl > dt {
		grid-column: 1 / -1;
	}

	.shop-list ul.topiclist > li > dl > dt,
	.shop-list ul.topiclist > li > dl > dd.shop-col-price,
	.shop-list ul.topiclist > li > dl > dd.shop-col-stock,
	.shop-list ul.topiclist > li > dl > dd.shop-col-action {
		display: block;
		width: auto;
		min-width: 0;
	}

	.shop-gift-row {
		margin: 6px 0 0;
	}

	.shop-detail-layout,
	.shop-detail-image,
	.shop-detail-info {
		display: block;
		width: auto;
	}

	.shop-detail-image {
		max-width: 260px;
		padding: 0;
		margin-bottom: 12px;
	}

	.shop-detail-stats {
		grid-template-columns: fit-content(45%) minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   Ultimate Shop additions
   Screens with no Virtual Shop counterpart, plus the features it
   did not have. Built from the same prosilver primitives so they
   sit alongside the ported rules rather than fighting them.
   ------------------------------------------------------------------ */

/* Sub-navigation: an action-bar of buttons, not a tab strip. */
.shop-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.shop-nav .button.shop-nav-active {
	font-weight: bold;
	box-shadow: inset 0 -2px 0 rgba(128, 128, 128, 0.55);
}

/* Inline tags on a row: sale / new / featured / limited. */
.shop-tag {
	display: inline-block;
	padding: 1px 5px;
	margin-left: 4px;
	border: 1px solid rgba(128, 128, 128, 0.45);
	border-radius: 2px;
	font-size: 0.85em;
	font-weight: bold;
	vertical-align: middle;
	white-space: nowrap;
}

.shop-tag-new { border-color: #3fa34d; color: #3fa34d; }
.shop-tag-sale { border-color: #d9534f; color: #d9534f; }
.shop-tag-featured { border-color: #ffb52b; color: #ffb52b; }
.shop-tag-limited { border-color: #964cff; color: #964cff; }

/* Rarity colour comes from the database, so it is applied inline; the
   rarity-* class is still emitted for style-level overrides. */
.shop-rarity-text {
	font-weight: bold;
}

/* Limited items */
.shop-limited-note {
	margin-top: 6px;
	font-size: 0.95em;
	opacity: 0.85;
}

.shop-limited-closed {
	margin: 8px 0;
	padding: 8px;
	border: 1px solid rgba(150, 76, 255, 0.5);
	border-radius: 2px;
	font-weight: bold;
}

.shop-row-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0.45;
}

/* Generic list used by the marketplace, leaderboard, wishlist and gift
   history: same topiclist skeleton as the shop itself. */
.shop-table-list .shop-col-narrow {
	width: 90px;
	text-align: center;
}

.shop-table-list .shop-col-wide {
	width: 160px;
	text-align: center;
}

.shop-meta-line {
	display: block;
	font-size: 0.95em;
	opacity: 0.8;
}

/* A qualifier that belongs to the value beside it rather than being a fact of
 * its own -- "1  Limited run of 4", "#1  of 1 issued so far". Most uses of
 * .shop-meta-line really are separate lines, so this is a variant rather than a
 * change to the base. */
.shop-meta-line.shop-meta-inline {
	display: inline;
	margin-left: 0.5em;
}

.shop-inline-form {
	display: inline-block;
	margin: 0;
}

/* A number box sits directly beside a button, so it takes the button's
   metrics rather than the board's default form field -- which is several
   pixels taller and left every control in the row at its own height.
   border-box so the padding does not add to the width on top. */
.shop-inline-form input[type="number"],
.shop-row-actions input[type="number"] {
	box-sizing: border-box;
	width: 4.25em;
	padding: 2px 4px;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
}

/* Profile showcase gallery */
.shop-profile-panel-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}


/* Equipped items next to a post */

@media (max-width: 700px) {
	.shop-nav {
		gap: 3px;
	}

	.shop-filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.shop-col-price,
	.shop-col-stock,
	.shop-col-action {
		text-align: left;
	}
}

/* Leaderboard: three side-by-side boards that stack on narrow screens. */
.shop-board-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}

.shop-board-column {
	margin: 0;
}

.shop-rank {
	display: inline-block;
	min-width: 1.8em;
	font-weight: bold;
	opacity: 0.7;
}

/* ------------------------------------------------------------------
   Inventory rows carry far more controls than a catalogue row: equip,
   showcase, gift, list-for-sale, download, plus a sell form with its
   own quantity box. The catalogue's 150px action column crushes them
   together, so this page gets its own wider layout.
   ------------------------------------------------------------------ */
.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-stock {
	width: 80px;
}

.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-action {
	/* Border-box with 8px of padding each side. Measured on the rendered page,
	   the four buttons and their gaps come to 312px -- Showcase 82, Gift 43,
	   List for sale 117, Sell 58 -- so this leaves 324px of usable width with
	   a little headroom for a longer label or a different font. */
	width: 340px;
	text-align: right;
}

.shop-inventory-list .shop-col-action .shop-row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 4px;
	justify-content: flex-end;
	margin-bottom: 4px;
}

/* A form is a column -- its button, then its number box under it -- so all the
   buttons share the top line and the boxes sit beneath the one they belong to.
   A row of unlabelled number boxes off on their own would leave nothing saying
   which is the sell quantity and which is the showcase count. */
.shop-inventory-list .shop-col-action .shop-row-actions .shop-inline-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin: 0;
}

/* The status lines -- what an item sells for, why it cannot be listed yet --
   take the whole width rather than trying to sit in the button row. */
.shop-inventory-list .shop-col-action .shop-row-actions > .shop-meta-line {
	flex: 0 0 100%;
	text-align: right;
}

.shop-inventory-list .shop-row-actions .button,
.shop-inventory-list .shop-row-actions .shop-inline-form {
	margin: 0;
}

/* Keep the sell controls on one line and clear of the buttons above. */
/* The sell form is one of the columns in the row now, so it needs no strip of
   its own; the .shop-inline-form rule above already stacks it. */

/* Listings shown on an item's own page. */
.shop-item-market {
	margin-top: 12px;
}

.shop-owned-flag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border: 1px solid #3fa34d;
	border-radius: 2px;
	color: #3fa34d;
	font-weight: bold;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-action,
	.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-stock {
		width: auto;
		text-align: left;
	}

	.shop-inventory-list .shop-row-actions,
	.shop-inventory-list .shop-sell-form {
		justify-content: flex-start;
	}
}

/* Cheapest member listing, shown under the shop price on the index. */
.shop-market-price {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.9em;
	white-space: nowrap;
}

.shop-list .shop-col-action .shop-inline-form {
	display: inline-block;
	margin: 0;
}

.shop-list .shop-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

/* ------------------------------------------------------------------
   Form-control buttons (input/button) do not inherit the document font
   the way an <a class="button"> does, so a submit button sitting next
   to a link button renders smaller and in a different face. Force them
   to match inside the shop's action areas.
   ------------------------------------------------------------------ */
.shop-list .shop-col-action input.button,
.shop-list .shop-col-action button.button,
.shop-row-actions input.button,
.shop-row-actions button.button,
.shop-detail-actions input.button,
.shop-detail-actions button.button,
.shop-inline-form input.button,
.shop-inline-form button.button {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 8px;
	vertical-align: middle;
	box-sizing: border-box;
}

/* One height for everything in the row, not a minimum. A link button carries
   prosilver's own padding and came out at 26px, a submit at 24px and a number
   box at 26px -- near enough to read as sloppy rather than deliberate. Set to
   the tallest of the three so nothing has to shrink its text to fit.

   The links centre their own text because .shop-row-actions a.button is
   inline-flex; the inputs centre theirs by default. */
.shop-row-actions > .button,
.shop-row-actions .shop-inline-form > .button,
.shop-row-actions input[type="number"],
.shop-sell-form > .button,
.shop-sell-form input[type="number"] {
	height: 26px;
	box-sizing: border-box;
}

.shop-row-actions a.button {
	display: inline-flex;
	align-items: center;
}

/* ------------------------------------------------------------------
   Item detail: action buttons
   The buy form, marketplace link and wishlist form are separate
   blocks, so without this they stack at differing offsets and look
   ragged. Lay them out on one baseline.
   ------------------------------------------------------------------ */
.shop-detail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}

.shop-detail-actions form,
.shop-detail-actions > .button {
	margin: 0;
}

.shop-detail-actions .shop-inline-form {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Notes and warnings sit on their own line, full width, rather than
   being squeezed in beside the buttons.

   border-box because the 100% is the container's CONTENT width: a note with
   padding and a border would otherwise total 100% plus both, and spill out of
   the panel it is sitting in. */
.shop-detail-actions > p {
	flex: 0 0 100%;
	box-sizing: border-box;
	max-width: 100%;
	margin: 4px 0 0;
}

/* Seller avatars in the item page's listing table. */
.shop-seller-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 32px;
}

.shop-seller-avatar img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 2px;
	vertical-align: middle;
}

/* The listing table has no item thumbnail, so drop the gutter the
   catalogue rows reserve for one. */
.shop-item-market ul.topiclist > li > dl > dt .list-inner {
	padding-left: 0;
	min-height: 0;
}

/* Form action rows (submit + cancel).
   prosilver renders an <input> button and an <a> button with different
   line boxes, so side by side they sit at different heights. Flex with
   align-items: center puts them on one baseline regardless of element. */
.shop-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	text-align: left;
}

.shop-form-actions > input.button,
.shop-form-actions > button.button,
.shop-form-actions > a.button {
	float: none;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 10px;
	vertical-align: middle;
	box-sizing: border-box;
}

/* The showcase button changes its label when the item is showcased. Pinning a
   minimum width stops a showcased row wrapping its actions onto a different
   number of lines from an unshowcased one, which made the column jitter as you
   toggled items. */
.shop-inventory-list .shop-row-actions .shop-showcase-toggle {
	min-width: 96px;
	text-align: center;
}

/* The accept-bid control sits inline in a sentence listing the bids, so it
   must not break the line the way a block form would. */
.shop-accept-bid {
	display: inline-block;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

/* Serial numbers on limited items.
 *
 * Deliberately almost nothing. A serial appears in four places -- beside "You
 * own" on the item page, inside the Limited badge, on an inventory row and on a
 * showcase card -- and each of those already has a size and a weight that suits
 * it. Setting either here made the number the odd one out wherever it landed:
 * an earlier version shrank it to 0.9em and dimmed it, which read as a mistake
 * next to the line above it.
 *
 * Tabular figures are the one thing worth keeping, so a column of serials lines
 * up digit under digit. They work on the board's own font, which is why there is
 * no monospace family here either: Consolas has a far smaller x-height than
 * Verdana and still looked shrunken at an identical pixel size.
 */
.shop-serials {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The shop guide panel at the foot of the index.
 *
 * Two columns: the heading and the thing it explains, side by side. Without
 * this the panel falls back to prosilver's stacked definition list and every
 * entry costs two or three lines.
 *
 * align-items:start keeps a short label level with the first line of a long
 * explanation rather than centred against the whole block.
 */
.shop-guide-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 16px;
	row-gap: 8px;
	align-items: start;
	margin: 0;
	padding: 0;
}

.shop-guide-list dt,
.shop-guide-list dd {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	text-align: left;
}

/* A label column costs more than it gives once the text column gets narrow. */
@media (max-width: 600px) {
	.shop-guide-list {
		display: block;
	}

	.shop-guide-list dd {
		margin-bottom: 8px;
	}
}