/*!
 * The admin control panel's visual language, applied to the storefront.
 *
 * admincp was rebuilt on Tabler in 2026-08 and is the most modern surface we
 * own. This file carries its type, control metrics, lines and shadows across
 * to the public site. It is a layer on top of styles.css rather than edits
 * inside it, for two reasons:
 *
 *   1. It comes off in one line. views/header/view_header.php decides whether
 *      to emit the <link>; delete that block and the site is exactly what it
 *      was, because nothing here is depended on by anything there.
 *   2. The two can be compared on the same page. ?ui=classic turns this off
 *      for the rest of the browsing session, ?ui=modern turns it back on.
 *
 * WHAT THIS DOES NOT TOUCH: colour. The palette moved to the brand style
 * guide and admincp's dark surfaces in the commits before this one and is
 * already shared between the two products. The four border and shadow tokens
 * re-pointed below are the exception, and they are re-pointed at admincp's
 * values rather than new ones.
 *
 * ON THE TYPEFACE. docs/brand-style-guide.md says one typeface, Maven Pro,
 * headlines 800 and body 500-600. That guide opens with "How to make an image
 * that belongs to this brand" and every section under it is about marks,
 * wordmarks, ad sets and the generated kit - it governs imagery, and the
 * generated kit still renders in Maven Pro, unchanged. Interface text is a
 * different problem: it is small, it is read at a glance, and it has to
 * rasterise well on a stranger's screen. admincp settles that with the
 * platform's own UI face, which is already hinted for the display it is on,
 * and it costs no webfont request. The storefront gets the same stack here.
 * The wordmark in the header is artwork and is untouched, so the brand face
 * still appears where the guide asks for it.
 *
 * --font-display is left pointing at Maven Pro. Setting --font-body back to
 * var(--font-display) in the block below returns the whole site to it.
 *
 * 2026-09-20 JD
 */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	/* admincp's --admin-font. The platform UI face on each OS, then the
	   historical fallbacks for anything that matches none of them. */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* admincp's --admin-shadow / --admin-shadow-lg. */
	--ui-shadow: 0 2px 4px 0 rgba(31, 41, 55, .04);
	--ui-shadow-lg: 0 8px 24px -4px rgba(31, 41, 55, .12);

	/*
	 * The ring a control shows while it has keyboard focus.
	 *
	 * The indicator itself has to clear 3:1 against what is next to it
	 * (WCAG 2.2 SC 2.4.11), which rules out a soft tinted halo on its own -
	 * Sky at 20% over white is about #cfeefc, 1.2:1, and even solid Sky is
	 * only 2.65:1 on white. So the ring proper is Deep Sky, which measures
	 * 4.35:1 on white and 3.34:1 on the navy footer, and the halo outside it
	 * is decoration rather than the indicator.
	 */
	--ui-focus-ring: 0 0 0 2px #0a7fc2, 0 0 0 5px rgba(10, 127, 194, .25);

	/* Section labels - "FILTER BY LEVEL", "PRICE", "SORT". admincp sets
	   these at 11px/600 with .04em of tracking; the storefront was setting
	   them at 14px/500, which is body size, so they competed with the rows
	   underneath instead of introducing them. */
	--ui-label-size: 11px;
	--ui-label-tracking: .04em;
}

/*
 * Two greys were doing the work of admincp's one pair. --primary-border-color
 * was #e1e7ec and --secondary-border-color #d7d7d7, close enough that they
 * read as the same line until they met - and where they met, as under the
 * navbar, the pair looked like one soft line rather than either of them.
 * These are admincp's --admin-border and --admin-border-strong exactly.
 */
.light-theme {
	/*
	 * The page is not the same colour as a panel. admincp is a light-grey page
	 * with white panels on it, and that separation is most of why it reads as
	 * modern; the storefront was white panels on a white page, so nothing
	 * separated from anything and every boundary had to be a border or a shadow.
	 * Cloud is the brand guide's own "light page background".
	 *
	 * This is a token of its own rather than a change to
	 * --primary-background-color because that one is also what inputs, dropdowns
	 * and a few hundred rules use as "white", and they should stay white.
	 */
	--page-background-color: #f5f8fa;

	/*
	 * Text colours that clear AA on white AND on the Cloud page. Measured on the
	 * rendered marketplace and listing pages, not estimated - these were the
	 * failures, and there were 415 elements across the two:
	 *
	 *   mint  #43d9a3 as text (prices, thumb counts, Add to Cart)   1.7:1
	 *   Sky   #0da9ef as text (ratings, links, Follow, active nav)  2.6:1
	 *   grey  #9da9b9 as text (struck prices, labels, small print)  2.4:1
	 *
	 * Sky and mint stay exactly what they are for FILLS - buttons, pills, the
	 * logo. Only the text tokens move, which is why they were split out in
	 * styles.css: --link-color and --success-text-color equal the fill colours
	 * there and are deepened here.
	 *
	 *   --link-color          #0873b0   5.1:1 white   4.8:1 Cloud
	 *   --success-text-color  #087f57   5.0:1 white   4.7:1 Cloud
	 *   --text-muted-color    #5f6b7a   5.5:1 white   5.1:1 Cloud
	 */
	/*
	 * Soft tints - admincp's `bg-*-lt` chips. A pale wash of the hue with the hue
	 * itself as the glyph or label, in place of a solid brand fill with a navy
	 * label on it. They carry icons, active states and hover states.
	 */
	/* Checkbox / radio: a boundary that clears 3:1 on white (1.4.11), a fill that
	   is a palette blue rather than mint, and a mark that clears 3:1 on that fill. */
	--check-border-color: #8492a6;
	--check-fill-color: #0a7fc2;
	--check-mark-color: #ffffff;

	--tint-primary: #e1f3fc;
	--tint-success: #e2f7ef;
	--tint-warning: #fff3df;
	--tint-danger: #fce9e9;
	--tint-neutral: #f1f3f5;
	--warning-text-color: #a86300;

	/* A featured listing: a whisper of Sky rather than grey with an 80%-black
	   shadow, which read as dirty on any page that was not white. */
	--boost-card-background-color: #f1f9fe;
	--boost-card-border-color: #b9e3f7;

	--link-color: #0873b0;
	--link-hover-color: #065f92;
	--success-text-color: #087f57;
	--text-muted-color: #5f6b7a;
	--list-link-color: #5f6b7a;

	--primary-border-color: #e5e7eb;
	--secondary-border-color: #d1d5db;
	--form-border-color: #d1d5db;

	/*
	 * admincp's --admin-text-muted. The storefront's own --text-muted-color is
	 * #9da9b9, which is 2.38:1 on white - under AA, and a label set in it at
	 * 11px would be worse than the 14px one it replaces. This is 4.83:1.
	 *
	 * It is a separate token rather than a correction to --text-muted-color
	 * because that one is also used on the navy footer, where a darker grey
	 * would fail in the other direction. Muted body text is a job for the
	 * pass that goes through the footer with it.
	 */
	--ui-label-color: #6b7280;
}

/*
 * The dark theme has to restate the three border tokens even though it is not
 * changing two of them, and the reason is worth writing down. The body element
 * carries BOTH classes - view_header.php:364 renders class="light-theme
 * dark-theme" when dark is on - so which one wins is decided by document order,
 * not by the element. styles.css puts .dark-theme after .light-theme and gets
 * the right answer. This file is loaded after styles.css, so a .light-theme
 * block here outranks the .dark-theme block there, and a dark page would have
 * taken the light greys above.
 *
 * --secondary-border-color moves off #2e3c51 to #3b4a61 to mirror the
 * weak/strong pair the light theme now has; both are admincp's.
 * --form-border-color keeps #64748b, which is what gets an unfocused input a
 * 3:1 edge against the #111827 page rather than against the card it sits on.
 */
.dark-theme {
	/* Dark already has a page/panel step (#111827 under #1f2937). */
	--page-background-color: #111827;

	/* Restated because <body> carries both theme classes: a .light-theme value in
	   this later file would otherwise beat styles.css's .dark-theme one. */
	/* Sky fill with a navy mark: white on Sky is 2.65:1, navy on Sky is 6.4:1. */
	--check-border-color: #64748b;
	--check-fill-color: #0da9ef;
	--check-mark-color: #0b2b45;

	--tint-primary: rgba(13, 169, 239, .16);
	--tint-success: rgba(45, 212, 167, .16);
	--tint-warning: rgba(255, 177, 64, .16);
	--tint-danger: rgba(214, 57, 57, .22);
	--tint-neutral: #2e3c51;
	--warning-text-color: #ffb140;
	--boost-card-background-color: #2e3c51;
	--boost-card-border-color: #3b4a61;

	/*
	 * Lighter Sky for TEXT on dark. Plain Sky is 6.4:1 on the page and on a card
	 * but 4.2:1 on the raised #2e3c51 a featured listing now sits on, which is
	 * under AA at 12px. #39b8f2 is 4.9:1 there and 6.4:1 on a card.
	 */
	--link-color: #39b8f2;
	--link-hover-color: #7bd0f7;
	--success-text-color: var(--success-color);

	/* .6 is 4.4:1 on the raised surface; .7 is 5.2:1 and still reads as muted. */
	--text-muted-color: rgba(229, 231, 235, .7);
	--list-link-color: #e5e7eb;

	--primary-border-color: #2e3c51;
	--secondary-border-color: #3b4a61;
	--form-border-color: #64748b;

	/* admincp's dark --admin-text-muted: 6.4:1 on the #111827 page. */
	--ui-label-color: rgba(229, 231, 235, .6);

	/* A shadow tuned for a white page disappears on a #111827 one. */

	--ui-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
	--ui-shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, .5);
	/* Sky on dark: 6.7:1 on the #111827 page, 5.6:1 on a #1f2937 card. */
	--ui-focus-ring: 0 0 0 2px #0da9ef, 0 0 0 5px rgba(13, 169, 239, .3);
}

/* ==========================================================================
   Surfaces

   Page, then panel. The panel is admincp's .box: the surface colour, a 1px
   border, a 6px radius and a shadow you notice only when it is missing.
   ========================================================================== */
body,
.offcanvas-wrapper {
	background-color: var(--page-background-color);
}

/*
 * Sidebar widgets - the marketplace filters, the category tree, top sellers,
 * recently viewed - sat directly on the page with only a rule under their
 * title. On a grey page that reads as text floating on nothing, so they are
 * panels now, and the title's rule becomes the panel header's.
 */
/*
 * Not .widget-light-skin: that modifier is the site's own marker for a widget
 * on a dark surface, and every column of the navy footer is one. Without the
 * exclusion each of them became a white panel holding white text.
 */
.widget:not(.widget-light-skin) {
	padding: 16px;
	background-color: var(--secondary-background-color);
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	box-shadow: var(--ui-shadow);
}

.widget:not(.widget-light-skin) > .widget-title:first-child {
	margin: -16px -16px 16px;
	padding: 12px 16px;
}

/*
 * A widget that already sits inside a panel is not a second one. Three places
 * nest them: the marketplace sidebar's "New listings" (a .widget in a .widget),
 * and the checkout and order-progress summaries (a .widget in a .card). Those
 * would get a second border and another 16px of padding. Same for a widget in a
 * modal, which is already a surface. This comes after the rules above and has
 * the same or higher specificity, so it wins.
 */
.widget:not(.widget-light-skin) .widget,
.card .widget,
.modal .widget {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.widget:not(.widget-light-skin) .widget > .widget-title:first-child,
.card .widget > .widget-title:first-child,
.modal .widget > .widget-title:first-child {
	margin: 0 0 12px;
	padding: 0 0 8px;
}

a:hover {
	color: var(--link-hover-color);
}

/* ==========================================================================
   Base text

   The site set body text in Maven Pro at weight 400. Maven Pro is a geometric
   face with a low x-height and even, thin strokes; at 14px on a light grey it
   has very little on the page to hold on to, which is most of why the site
   read as faint. The stack above lands on a face built for this size, so 400
   is a normal weight again rather than a thin one.

   -webkit-font-smoothing: antialiased was thinning glyphs further on the
   platforms where it applies. It goes back to the platform default.
   ========================================================================== */
body {
	font-family: var(--font-body);
	font-weight: 400;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeSpeed;
}

/*
 * Headings.
 *
 * Two problems, not one. They were all set at weight 500 - a heading that
 * weighs barely more than the paragraph under it is not doing its job - and
 * the scale ran 36/30/24/20/18/16, which is a print scale. On a screen that
 * makes an h1 a banner and leaves h5 and h6 indistinguishable from body text.
 * This is the same six steps at about 82% and with real weight behind them.
 */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight: 600;
	letter-spacing: -.011em;
}

h1, .h1,
h2, .h2 {
	font-weight: 700;
}

h1, .h1 { font-size: 30px; line-height: 1.2; }
h2, .h2 { font-size: 25px; line-height: 1.24; }
h3, .h3 { font-size: 21px; line-height: 1.3; }
h4, .h4 { font-size: 18px; line-height: 1.35; }
h5, .h5 { font-size: 16px; line-height: 1.4; }
h6, .h6 { font-size: 14px; line-height: 1.45; }

@media (max-width: 767.98px) {
	h1, .h1 { font-size: 26px; }
	h2, .h2 { font-size: 22px; }
	h3, .h3 { font-size: 19px; }
}

/*
 * The band at the top of a content page sets its own heading at 24px and
 * font-weight: normal (styles.css:9088), which is more specific than the
 * element rules above, so those pages would have kept a heading that weighs
 * the same as the paragraph under it. This is the h2 step, which is what a
 * page title is.
 */
.page-title h1,
.page-title h2,
.page-title h3 {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.011em;
}

@media (max-width: 767.98px) {
	.page-title h1,
	.page-title h2,
	.page-title h3 {
		font-size: 22px;
	}
}

/*
 * Muted text was being set at weight 300 with a line-height equal to its own
 * font-size. No 300 face was ever loaded, so the weight did nothing but leave
 * the intent on record; the leading was the visible half of it, and it packed
 * descenders into the line below. Both revert to the body's.
 */
.text-muted,
.text-muted-less {
	font-weight: inherit;
	line-height: 1.5;
}

/* ==========================================================================
   Section labels

   admincp's pattern: small, semibold, tracked out, muted, and clearly a label
   rather than a heading.
   ========================================================================== */
.widget-title {
	margin-bottom: 12px;
	padding-bottom: 8px;
	color: var(--ui-label-color);
	font-size: var(--ui-label-size);
	font-weight: 600;
	letter-spacing: var(--ui-label-tracking);
	line-height: 16px;
	border-bottom: 1px solid var(--primary-border-color);
}

/* ==========================================================================
   Buttons

   Four changes, and the first is the one that matters.

   ALL CAPS. Every button on the site was uppercased in CSS with .07em of
   tracking on top. The style guide is explicit - "CTA button: Sentence case,
   never ALL CAPS" - and the markup was sentence case all along ("Order Now",
   "Sign In", "Join"), so this is text-transform doing it, and turning it off
   is the whole fix. Caps at 12px also cost the reader the word shape they
   normally recognise a label by.

   transform: translateZ(0). Promotes every button to its own compositor
   layer. A composited layer whose position lands on a fractional device pixel
   rasterises its text off the pixel grid, which is a soft-edged label on any
   display that is not exactly 1x - and a layer per button, on a page with
   forty of them, for no drawing that needs one.

   transition: all 0.4s. Four hundred milliseconds on every animatable
   property, so a hover took most of half a second to arrive and dragged
   layout properties through the compositor on the way. admincp transitions
   the two things that actually change, over 0.12s.

   Focus. There was no focus style beyond the browser's, and .btn:focus was
   caught up in a malformed selector further up styles.css, so keyboard users
   had nothing. :focus-visible means the ring appears for the keyboard and
   not for the mouse.
   ========================================================================== */
.btn {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	-webkit-transform: none;
	transform: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.btn-sm {
	font-size: 13px;
}

.btn:focus-visible,
.btn:focus-visible:active {
	outline: none;
	box-shadow: var(--ui-focus-ring);
}

/*
 * Three things that look like buttons without carrying .btn: the two disabled
 * variants (the rating and helpful controls) and iziToast's action buttons.
 * Each is its own copy of the .btn declaration block, caps, tracking, layer
 * promotion and all, so leaving them out would have put two button styles on
 * the same page.
 */
.btn-link-primary-disabled,
.btn-success-disabled,
.iziToast > .iziToast-body .iziToast-buttons > button {
	text-transform: none;
	letter-spacing: 0;
	-webkit-transform: none;
	transform: none;
}

/* ==========================================================================
   Form controls

   The height stays at 44px. It is generous for a desktop form but it is also
   a comfortable touch target, and the mobile pass that follows this one wants
   every target at 44px or more, so shrinking it here would be work to undo.
   What changes is the inside: the text was sitting on a 3px bottom pad that
   pushed it off centre, and there was no focus ring.
   ========================================================================== */
.form-control {
	font-family: var(--font-body);
	padding: 0 12px;
}

textarea.form-control {
	padding: 10px 12px;
}

/* styles.css:2181 sets box-shadow: none !important on this same selector, so
   the ring has to carry !important to reach the control at all. */
.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: var(--ui-focus-ring) !important;
}

label,
.form-label {
	font-weight: 500;
}

/* ==========================================================================
   Surfaces

   admincp draws a card as a flat panel: one hairline border, a 6px radius and
   a shadow you notice only when it is missing. The storefront was drawing
   .card with a 12px-blur shadow at 0.75rem offset, which is a drop shadow
   from a different decade, and no border at all on the light theme.
   ========================================================================== */
.card {
	border: 1px solid var(--primary-border-color);
	box-shadow: var(--ui-shadow);
}

.card:hover {
	box-shadow: var(--ui-shadow-lg);
}

.dropdown-menu,
.toolbar-dropdown {
	border: 1px solid var(--primary-border-color);
	border-radius: var(--radius);
	box-shadow: var(--ui-shadow-lg);
}

/* ==========================================================================
   Navigation

   The main nav was uppercased and tracked the same way the buttons were, and
   for the same reason it reads better as written. The markup is "Home",
   "Community", "Sell A Service".
   ========================================================================== */
.site-menu > ul > li > a {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * And the same labels in the mobile drawer, which keeps its own copy at
 * styles.css:253 with .05em of tracking. Without this, Home and Community
 * are sentence case on a desktop and caps on a phone. A media query adds no
 * specificity, so this reaches inside the one that rule lives in.
 */
.offcanvas-menu ul li a {
	text-transform: none;
	letter-spacing: 0;
}

/*
 * The category strip.
 *
 * It was laid out as a table: .sub-nav display:table with each item a
 * table-cell. A table row gives every cell the same width regardless of what
 * is in it, so "Programming" got as much room as "Onsite SEO & Research" and
 * the gaps between labels came out different every time - the strip looked
 * unevenly spaced because it was. Flex lays them out at the width of their
 * own text with one gap between.
 *
 * The labels were also set at weight 200. No 200 face was ever loaded, so
 * they rendered at 400, the lightest weight there was - the strip was asking
 * to be the faintest thing on the page and getting most of its wish.
 *
 * This also clears the way for the popout menu: a table-cell cannot be a
 * positioning context for a submenu, and display:block li can.
 */
.sub-menu-nav {
	display: flex;
	align-items: center;
	min-height: 36px;

	/*
	 * The divider between the navbar and the strip. There has not been one since
	 * the strip's own top border went: the strip starts at the navbar's inner
	 * edge, so it paints over the navbar's bottom border, and white sat directly
	 * on white with nothing between them.
	 *
	 * It is drawn HERE, on the strip, rather than by un-hiding the navbar's. The
	 * two occupy the same pixels - the strip overlaps that border - so this is one
	 * line, not the two-lines-a-pixel-apart that made the strip look out of focus
	 * before. Same token as the navbar's, so the greys cannot drift apart again.
	 */
	border-top: 1px solid var(--primary-border-color);
}

/*
 * .site-menu ul is (0,1,1) and sets padding: 0, so the strip has to be named
 * through .site-menu as well to be able to have any. Before this the 4px and
 * then 20px of padding written here never applied and the labels sat 10px from
 * the window edge.
 */
.site-menu .sub-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	height: auto;
	min-height: 0;
	margin-top: 0 !important;

	/* 20px so the first label starts where the logo does rather than 10px from
	   the edge of the window; the strip spans the full width like the navbar. */
	padding: 0 20px;
}

/*
 * Dropdowns paint above the strip.
 *
 * .sub-menu (Community, Sell a service) is position:absolute with no z-index,
 * and the strip's items became position:relative in the layer, so the two sat
 * in the same paint layer and the strip - later in the document - won: its
 * labels were printed across the menu ("Guest Posts" over "Community
 * Discussion"). The dropdowns get an explicit z-index. It is on the dropdown
 * rather than removing position:relative from the strip because the strip's
 * hover popout needs that.
 */
.site-menu .sub-menu,
.site-menu .mega-menu,
.site-menu .toolbar-dropdown {
	z-index: 20;
}

.sub-nav li {
	display: block;
	position: relative;

	/* A flex item will not shrink below its content by default, so eight
	   labels long enough to exceed the row would push it past the viewport
	   instead of giving way. They fit today at 1071px with about 60px to
	   spare, but the labels are the eight busiest categories and come out of
	   the database, so that is a fact about this week's data rather than
	   about the layout. This and the ellipsis below make it a property of
	   the layout. */
	min-width: 0;
}

/*
 * .site-menu ul > li > a is (0,1,3) and would otherwise keep its 15px of
 * padding and its 300ms transition here, because the strip renders inside
 * .site-menu. Naming .sub-nav makes this (0,2,2), which wins on class count.
 */
.site-menu .sub-nav li a {
	display: block;
	padding: 4px 10px;
	line-height: 20px;

	/* Regular, not 500. These are eight navigation labels in a row; at 500 they
	   read as a second, louder menu competing with the main one above. */
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .12s ease;
}

/*
 * A more compact header on desktop. The navbar was 84px with 44px controls in
 * the middle, so 20px of nothing above and below them, and then the strip added
 * its own 10px above each label: about 30px of empty band between the buttons and
 * the category names. 72px and 36px take that to about 18px.
 *
 * Desktop only. Below 1071px the navbar has its own 78px and the strip is hidden.
 * Nothing else hardcodes the height - the sticky-header script measures it - but
 * the root's top padding has to equal the strip's height, because the strip lives
 * inside the absolutely positioned menu and takes no room of its own.
 */
@media (min-width: 1071px) {
	.navbar {
		min-height: 72px;
	}

	body.has-sub-nav #root {
		padding-top: 36px;
	}
}

/*
 * The band with the page title and breadcrumbs was --misc-secondary, a neutral
 * #f5f5f5 - a different grey from the bluish page, so it looked like a stripe
 * of the wrong colour rather than a header. It is a white band with a hairline
 * under it now, the same as the navbar above it.
 */
.page-title {
	background-color: var(--secondary-background-color);
}

/* ==========================================================================
   Featured listings
   ========================================================================== */
.product-card.card-boost {
	border-color: var(--boost-card-border-color);
	box-shadow: var(--ui-shadow);
}

/* ==========================================================================
   Border-only buttons

   The outline is the quiet button and the filled one is the loud one, and a
   card with a filled button beside an outlined one is asking the visitor to
   work out which matters more. Where several actions are equals - the seller
   card's Follow / Contact / Custom order - they are all outlined.

   Text and border are the deeper --link-color, not Sky: Sky on white is 2.6:1
   and a 1px Sky border is too faint to see. And the hover is a tint, not a
   solid Sky fill - the fill needed a navy label to be readable, which is the
   black-on-blue that looked wrong on a button that had just been white.
   ========================================================================== */
.btn-outline-primary {
	color: var(--link-color);
	border-color: var(--link-color);
	background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	color: var(--link-hover-color);
	border-color: var(--link-hover-color);
	background-color: var(--tint-primary);
	box-shadow: none;
}

.btn-outline-primary:focus-visible {
	box-shadow: var(--ui-focus-ring);
}

/* ==========================================================================
   The seller card (listing sidebar, profile)
   ========================================================================== */

/* Follow | Contact on one row, Custom order across the full width beneath. */
.user-info-wrapper > .text-center {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 4px 16px 12px;
}

.user-info-wrapper > .text-center > .btn {
	margin: 0 !important;
	width: 100%;
}

.user-info-wrapper > .text-center > .btn:only-child,
.user-info-wrapper > .text-center > .btn:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/*
 * The rows of facts underneath. Both columns were weight 700, the label in pale
 * grey and the value in dark - so the label was the loud one and neither had
 * anything to set it apart from the other. Now the label is quiet and regular,
 * and the value is what you read.
 *
 * The values are <th> in the markup, which is why the table rule further down
 * had to be narrowed to thead: this card's <th> are not headings.
 */
.profile-items {
	padding: 4px 16px;
}

.profile-items table tbody tr td,
.profile-items table tbody tr th {
	padding: 10px 0 !important;
	vertical-align: middle;
	border-top: 0 !important;
	border-bottom: 1px solid var(--primary-border-color) !important;
}

.profile-items table tbody tr:last-child td,
.profile-items table tbody tr:last-child th {
	border-bottom: 0 !important;
}

.profile-items table tbody tr td {
	color: var(--text-muted-color) !important;
	font-size: 13px;
	font-weight: 400 !important;
	white-space: nowrap;
}

.profile-items table tbody tr th {
	color: var(--third-color) !important;
	font-size: 14px;
	font-weight: 600 !important;
	text-align: right;
	white-space: nowrap;
}

/* The number in "5 days" is wrapped in its own element (a <strong> from the
   response-time helper, a <span class="days-text"> for delivery) with its own
   weight, which made it visibly heavier than the word next to it. One weight for
   the whole value. */
.profile-items table tbody tr th * {
	font-weight: inherit !important;
}

/* The glyphs sit in a soft square, like the tiles on the admincp dashboard. */
.profile-items table td > i.fas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 10px 0 0 !important;
	border-radius: var(--radius);
	background-color: var(--tint-neutral);
	color: var(--text-muted-color) !important;
	font-size: 13px;
	vertical-align: middle;
}

.profile-items table td > i.text-success {
	background-color: var(--tint-success);
	color: var(--success-text-color) !important;
}

.profile-items table td > i.text-info,
.profile-items table td > i.text-primary {
	background-color: var(--tint-primary);
	color: var(--link-color) !important;
}

.profile-items table td > i.text-warning {
	background-color: var(--tint-warning);
	color: var(--warning-text-color) !important;
}

.profile-items table td > i.text-danger {
	background-color: var(--tint-danger);
	color: var(--danger-color) !important;
}

/* ==========================================================================
   Brand-filled surfaces made from utility classes

   bg-primary + text-white is white on Sky at 2.65:1 - the profile's ratings
   tile is one - and it slipped past the button relabel in the last pass because
   it is a pair of utilities, not a component. Same label as everywhere else on
   a brand fill: navy. bg-danger is not in the list; white on that red passes.
   ========================================================================== */
.bg-primary.text-white,
.bg-primary .text-white,
.bg-success.text-white,
.bg-success .text-white,
.bg-info.text-white,
.bg-info .text-white,
.bg-warning.text-white,
.bg-warning .text-white {
	color: var(--text-on-brand) !important;
}

/* The "or" between the sign-in form and the passkey button was #d3dadf on the
   page: 1.3:1. */
.divider-text {
	color: var(--text-muted-color);
}

/* ==========================================================================
   Checkboxes and radios (the marketplace filters, the order extras)

   They were a 16px grey square with no edge, mint when ticked, next to a label
   at weight 500 in a colour that was already grey - so a ticked box and an
   unticked one differed by hue alone, on a green that does not clear 3:1 against
   white, and the whole list read as heavy. This is the admincp control: a white
   box with a real border, the brand blue when ticked with a drawn mark, a hover
   state, and a focus ring for the keyboard.
   Not the toggle switch (.custom-switch): its ::before is a 40x16 pill and it
   keeps its own look.
   ========================================================================== */
.custom-control .custom-control-label {
	font-weight: 400;
	color: var(--primary-text-color);
}

/* "Pro" and the other labels marked text-bold: emphasis, not shouting. */
.custom-control .custom-control-label.text-bold {
	font-weight: 500 !important;
}

.custom-control:not(.custom-switch) .custom-control-label::before {
	background-color: var(--secondary-background-color);
	border: 1px solid var(--check-border-color);
	border-radius: var(--radius-sm);
	transition: background-color .12s ease, border-color .12s ease;
}

/* The :not(.custom-switch) above adds a class to that rule's specificity, so this
   has to carry it too or the radio's circle loses to the checkbox's 4px. */
.custom-radio:not(.custom-switch) .custom-control-label::before {
	border-radius: 50%;
}

.custom-control:not(.custom-switch):hover .custom-control-input:not(:disabled):not(:checked) ~ .custom-control-label::before {
	border-color: var(--link-color);
}

.custom-control:not(.custom-switch) .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--check-fill-color);
	border-color: var(--check-fill-color);
}

/* The mark is drawn, not an image, so it can follow the theme. */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	background-image: none;
	left: 5.5px;
	top: 6px;
	width: 5px;
	height: 9px;
	border: solid var(--check-mark-color);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
	background-image: none;
	left: 5px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--check-mark-color);
}

.custom-control:not(.custom-switch) .custom-control-input:focus-visible ~ .custom-control-label::before {
	box-shadow: var(--ui-focus-ring) !important;
}

.custom-control:not(.custom-switch) .custom-control-input:disabled ~ .custom-control-label::before {
	background-color: var(--tint-neutral);
	border-color: var(--primary-border-color);
}

/* Filter lists: 6px above each row rather than 8 above and 6 below. The rows
   were about 32px apart for a 14px label, which made a long filter list run far
   longer than it needed to. */
.widget .custom-control {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Active pills

   admincp marks the current item with a tint and the hue as the label, not a
   solid fill. White on Sky was 2.6:1; this is 4.6:1 in light and 6:1 in dark.
   ========================================================================== */
.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
	background-color: var(--tint-primary) !important;
	color: var(--link-color);
	font-weight: 600;
}

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Column headers only. This was `.table th`, which reached every <th> on the
 * site - and a lot of views use <th> for a row's VALUE, not a column's heading
 * (the seller card on a listing: "5 days", "Today", "20 days"), so those
 * values came out as small uppercase muted labels. thead is what admincp
 * styles, and it is the only place a <th> is a header in these tables.
 */
.table thead th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--ui-label-tracking);
	text-transform: uppercase;
	color: var(--ui-label-color);
}

/* ==========================================================================
   Alerts

   Kept at their own colours; what changes is that they stop being shouty
   blocks with a heavy radius and become the flat, bordered notices admincp
   uses.
   ========================================================================== */
.alert {
	border-radius: var(--radius);
	font-size: 14px;
	box-shadow: none;
}

.alert strong,
.alert .alert-heading {
	font-weight: 600;
}