/* ============================================
   SKYLARC - TENDERS
   Theme layer applied over Bootstrap 4 to match the
   Skylarc website design system (www.skylarc.co.nz).
   Loaded after bootstrap.min.css.

   The NAVIGATION BAR and FOOTER sections further down are not a theme: they are copied verbatim
   from the website's own Web/styles.css, by way of valuation-web and book-a-pickup-web before it,
   so that the four sites are indistinguishable at the join. Read the note above those sections
   before editing them.

   Everything below the FOOTER section is this application's own, written against Bootstrap 4's
   class names rather than the 5.3 that Book a Pickup carries. The values are the website's.
   ============================================ */

:root {
	/* Brand colours */
	--color-primary: #ff6600;
	--color-primary-dark: #e55a00;
	--color-primary-soft: #fff3eb;
	--color-primary-soft-hover: #ffe8d4;
	--color-white: #ffffff;
	--color-dark: #312a2f;
	--color-text-primary: #1f1a1d;
	--color-text-secondary: #605b5e;
	--color-text-muted: #6f6a6e;
	--color-surface-muted: #f9fafc;
	--color-border: #d8dae5;
	--color-border-input: #d9dce2;
	--color-bg-input: #fafafa;

	/* Typography */
	--font-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* The same stack with Geist taken out — what the website's navigation and footer actually
	   render in. See the note above the NAVIGATION BAR section for why they use this and the rest
	   of this application does not. */
	--font-website-actual: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Radii */
	--radius-card: 24px;
	--radius-panel: 16px;
	--radius-input: 8px;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-card: 0 2px 8px rgba(17, 17, 17, 0.04);
	--shadow-panel: 0 14px 24px rgba(0, 0, 0, 0.1);
	--shadow-interactive: 0 8px 16px rgba(17, 17, 17, 0.12);

	/* Buttons */
	--btn-lg-min-h: 52px;
	--btn-md-h: 44px;

	/* --------------------------------------------------------------------
	   Below here: the website's own custom properties, copied because the
	   navigation and footer rules further down are written in terms of them.
	   Values as in its Web/styles.css :root. Do not "tidy" these into the
	   names above — keeping them spelled the website's way is what makes the
	   copied blocks a straight copy.
	   -------------------------------------------------------------------- */

	/* 8px spacing scale */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-10: 80px;

	/* Responsive grid margins & gutters */
	--grid-margin-mobile: var(--space-2);
	--mobile-gutter-x: var(--space-2);
	--grid-margin-tablet: var(--space-4);
	--grid-margin-desktop: var(--space-10);
	--grid-gutter-mobile: var(--space-2);
	--grid-gutter-tablet: var(--space-2);
	--grid-gutter-desktop: var(--space-3);

	/* Site shell (mobile-first; updated at the breakpoints below) */
	--site-gutter-x: var(--grid-margin-mobile);
	--site-gutter: var(--grid-gutter-mobile);

	/* Layout aliases */
	--spacing-lg: var(--space-2);
	--spacing-xl: var(--space-3);

	/* Buttons */
	--btn-font: var(--font-primary);
	--btn-weight: 600;
	--btn-radius: 9999px;
	--btn-lg-font: 16px;
	--btn-lg-lh: 24px;
	--btn-lg-py: 16px;
	--btn-lg-px: 32px;
	--btn-lg-min-w: 160px;

	/* Motion */
	--transition-base: 200ms ease-in-out;
	--transition-interactive: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease;

	/* Bootstrap variable overrides */
	--bs-primary: #ff6600;
	--bs-primary-rgb: 255, 102, 0;
	--bs-link-color: #ff6600;
	--bs-link-color-rgb: 255, 102, 0;
	--bs-link-hover-color: #e55a00;
	--bs-link-hover-color-rgb: 229, 90, 0;
	--bs-body-color: #1f1a1d;
	--bs-body-color-rgb: 31, 26, 29;
	--bs-body-font-family: var(--font-primary);
	--bs-border-color: #d8dae5;
	--bs-border-radius: 8px;
	--bs-border-radius-sm: 6px;
	--bs-border-radius-lg: 16px;
	--bs-secondary-color: #605b5e;
	--bs-emphasis-color: #1f1a1d;
}

/* Tablet 768+: 32px margins, 16px gutters */
@media (min-width: 768px) {
	:root {
		--site-gutter-x: var(--grid-margin-tablet);
		--site-gutter: var(--grid-gutter-tablet);
	}
}

/* Desktop 1280+: 80px side padding @ 1440 viewport → 232px @ 1920 (fluid between) */
@media (min-width: 1280px) {
	:root {
		--site-gutter-x: clamp(
			var(--grid-margin-desktop),
			calc(var(--grid-margin-desktop) + max(0px, 100vw - 1440px) * 152 / 480),
			232px
		);
		--site-gutter: var(--grid-gutter-desktop);
	}
}

/* Mobile ≤767px: 16px side padding */
@media (max-width: 767px) {
	:root {
		--site-gutter-x: var(--mobile-gutter-x);
		--site-gutter: var(--space-2);
	}
}

/* ============================================
   BASE
   ============================================ */

body {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text-primary);
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* The content column takes the same side margin as the footer - both are var(--site-gutter-x), so
   the first thing on the page starts exactly under the edge of the navigation pill and above the
   edge of the footer's logo, at every width. Bootstrap's own .container max-widths and its 15px
   gutter would put it 15px inside that and step it in jumps at each breakpoint instead. */
body > .container {
	flex: 1 0 auto;
	width: 100%;
	max-width: none;
	padding-left: var(--site-gutter-x);
	padding-right: var(--site-gutter-x);
	padding-bottom: 64px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	color: var(--color-text-primary);
	letter-spacing: -0.02em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3, h4, h5 { font-weight: 600; }

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.text-muted {
	color: var(--color-text-muted) !important;
}

/* ============================================
   SITE HEADER (dark band + page title)

   The band and its photos belong to this application. The navigation pill sitting on top of it is
   the website's, copied in the next section — the band is positioned so that the pill can be
   absolutely placed inside it exactly as the website's heroes place it.
   ============================================ */

.sky-header {
	position: relative;
	background: var(--color-dark);
	background-image: linear-gradient(180deg, #3a3238 0%, #2c2529 100%);

	/* Top padding clears the absolutely positioned .navbar (~98px tall at this breakpoint). */
	padding: 130px 24px 56px 24px;
	margin-bottom: 48px;

	/* The website's hero treatment: a 4px white border and a 24px radius, so the band reads as an
	   inset panel rather than a full-bleed stripe. Measured off about.php, case-studies.php,
	   sell.php and auctions.php, which all render a 4px white gutter on every edge (contact.php is
	   the odd one out at 10px). Bootstrap's `* { box-sizing: border-box }` keeps the border inside
	   the full-width band, exactly as the website's own box-sizing: border-box does. */
	border: 4px solid #ffffff;
	border-radius: 24px;

	/* Creates a stacking context so the negative z-index layers below sit above the band's own
	   background rather than disappearing behind the page. */
	isolation: isolate;
}

/* The clipping lives here rather than on .sky-header so that it catches the blurred photos without
   also catching the navigation, which the website lets overflow its hero between 1025 and 1279px.
   Each layer rounds itself instead — the same arrangement, and for the same reason, as
   .auctions-hero and .auctions-hero__images on the website. */
.sky-header__images,
.sky-header__overlay {
	border-radius: inherit;
}

.sky-header__images {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -2;
}

/* Two layers only — the script swaps the next photo onto whichever one is hidden and trades their
   opacity.

   These are 320x180 thumbnails rather than the full size photos, which are far too tall to crop into
   a shallow banner and far too heavy to cycle. Blurring and over-scaling turns the small source into
   a deliberate soft backdrop instead of a stretched one. The negative inset hides the soft edge the
   blur leaves behind. */
.sky-header__image {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(6px) saturate(1.15);
	transform: scale(1.05);
	opacity: 0;
	transition: opacity 1.4s ease;
}

.sky-header__image--active {
	opacity: 1;
}

/* Keeps the heading and navigation legible over whatever the photos happen to be. */
.sky-header__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(31, 26, 29, 0.62) 0%, rgba(31, 26, 29, 0.82) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.sky-header__image {
		transition: none;
	}
}

.sky-title {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
}

.sky-title h1 {
	color: #ffffff;
	font-size: 60px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 600;
	margin: 0;
}

.sky-title p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.18px;
	margin: 16px 0 0 0;
}

/* ============================================
   NAVIGATION BAR — copied from the website

   Everything from here to the end of the FOOTER section is a transcription of the corresponding
   rules in the Skylarc website's Web/styles.css, so that a visitor coming here from
   www.skylarc.co.nz sees the same bar and the same footer rather than a good imitation of them.
   Inc/Ui.php emits the website's markup and class names to match.

   Do not restyle these to taste. If they need to change, change them on the website first and copy
   the result across; if they and the website ever disagree, the website is right.

   To check they still agree, run the test that lives in the website's repository:

       ~/.venvs/playwright/bin/python Test/check_shared_chrome.py

   It compares every navigation and footer element between the two sites at fourteen viewport
   widths, compares the footer as pixels, and fails if either site's nav pill clips its own call to
   action. It resolves both URLs from ~/.config/skylarc/dev.env, so it needs no per-machine edit —
   see MACHINE-PATHS.md. Do not check by reading the website's CSS: its declared values are
   frequently not its rendered ones.

   Three things are NOT verbatim, and all are marked where they occur:

     * the website has a global `* { margin: 0; padding: 0 }` reset that this application does not,
       so the reset is reproduced scoped to these two subtrees;
     * Bootstrap and the theme rules further down this file style `.btn` and `a:hover`, which the
       website has no equivalent of, so those are neutralised inside the bar;
     * the font is pinned to --font-website-actual at the end of the FOOTER section. The copied
       rules ask for Geist, but only the website's /contact.php loads the Geist webfont — every
       other page, including every page that links here, falls back to the system font. This
       application does load Geist, so left alone the copied bar and footer would be the one thing
       on the page that did NOT match where the visitor came from. Matching what the website
       renders beats matching what its stylesheet asks for.

       If the website is ever fixed to load Geist everywhere, delete that block — it is the only
       part of this copy that would then be wrong.
   ============================================ */

/* Not on the website — see the note above. */
.navbar *,
.navbar *::before,
.navbar *::after,
.footer *,
.footer *::before,
.footer *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.navbar {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: var(--spacing-lg) 0;
	display: flex;
	justify-content: center;
}

.navbar__container {
	display: flex;
	width: 1280px;
	padding: 8px 8px 8px 32px;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(12px);
	overflow: hidden;
}

.navbar__logo {
	flex-shrink: 0;
}

.navbar__logo-img {
	height: 50px;
	width: auto;
	display: block;
	transition: var(--transition-base);
}

.navbar__logo:hover .navbar__logo-img {
	opacity: 0.8;
}

.navbar__hamburger {
	display: none;
	flex-direction: column;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
}

.navbar__hamburger-line {
	width: 24px;
	height: 2px;
	background-color: var(--color-white);
	transition: var(--transition-base);
	border-radius: 4px;
}

.navbar__hamburger.active .navbar__hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(8px, 8px);
}

.navbar__hamburger.active .navbar__hamburger-line:nth-child(2) {
	opacity: 0;
}

.navbar__hamburger.active .navbar__hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -7px);
}

.navbar__menu {
	display: block;
	flex: 1;
	text-align: center;
}

.navbar__list {
	display: flex;
	gap: 32px;
	list-style: none;
	align-items: center;
	justify-content: center;
}

.navbar__link {
	color: #FFF;
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.14px;
	transition: var(--transition-base);
	position: relative;
}

.navbar__link:hover {
	color: var(--color-primary);
}

/* Narrow-desktop crunch zone (above the 1024px hamburger cutoff, below the 1280px "full room"
   desktop breakpoint): six items do not fit the bar's available width in this range and individual
   link labels wrap onto two lines inside the pill. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.navbar__list {
		gap: clamp(14px, 1.6vw, 32px);
	}

	.navbar__link {
		font-size: clamp(12px, 0.9vw, 14px);
		white-space: nowrap;
	}

	/* The nowrap above raises .navbar__menu's min-content width, and a flex item's default
	   min-width: auto will not let it shrink below that — so the row overflowed the pill and
	   .navbar__container's overflow: hidden clipped the right end of the Auction Alerts button.
	   Fixed on the website first, copied here. */
	.navbar__menu {
		min-width: 0;
	}
}

.navbar__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.navbar__search {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: #ffffff;
	text-decoration: none;
	transition: var(--transition-base);
}

.navbar__search-icon {
	width: 24px;
	height: 24px;
	fill: none;
}

.navbar__search:hover .navbar__search-icon {
	color: var(--color-primary);
	filter: drop-shadow(0 0 4px rgba(255, 102, 0, 0.5));
}

/* Kept although this application renders no heart — see the comment in Ui::siteHeaderHtml(). These
   stay so the copy still diffs cleanly against the website, and so the heart needs no CSS work if it
   comes back once the two are on one origin. */
.navbar__watchlist {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: #ffffff;
	text-decoration: none;
	transition: var(--transition-base);
}

.navbar__watchlist-icon {
	width: 24px;
	height: 24px;
	fill: none;
}

.navbar__watchlist:hover .navbar__watchlist-icon {
	color: var(--color-primary);
	filter: drop-shadow(0 0 4px rgba(255, 102, 0, 0.5));
}

.navbar__watchlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

.navbar .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--btn-lg-min-h);
	min-width: var(--btn-lg-min-w);
	padding: var(--btn-lg-py) var(--btn-lg-px);
	font-family: var(--btn-font);
	font-size: var(--btn-lg-font);
	font-weight: var(--btn-weight);
	line-height: var(--btn-lg-lh);
	text-decoration: none;
	text-align: center;
	border-radius: var(--btn-radius);
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: var(--transition-interactive);
}

.navbar .btn--navbar-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	min-height: var(--btn-lg-min-h);
	padding: var(--btn-lg-py) var(--spacing-xl);
	font-size: var(--btn-lg-font);
	line-height: var(--btn-lg-lh);
	border: none;
	border-radius: var(--btn-radius);
}

.navbar .btn--navbar-primary:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

/* Not on the website — see the note above. Bootstrap and this file's own BUTTONS section give every
   .btn a hover lift, a focus ring and an underline that the website's navigation call to action
   does not have. Scoped off again here rather than made conditional up there, so the booking flow's
   buttons keep them. */
.navbar .btn:hover,
.navbar .btn:focus,
.navbar .btn:focus-visible {
	transform: none;
	box-shadow: none;
}

.navbar a:hover {
	text-decoration: none;
}

/* One self-contained animation per element, started by adding .navbar--animate-ready alone and
   finished by the browser (animation-fill-mode: forwards) — deliberately not a transition needing a
   second, JS-timed class to reach its "opacity: 1" end state. A JS timer can be throttled
   indefinitely for a backgrounded tab, which on the website was the actual cause of the top nav
   sometimes never appearing. All the timing is handed to CSS as custom properties. See
   pub/skylarc.js, which only ever adds one class, synchronously. */
@keyframes navbar-logo-in {
	from { opacity: 0; transform: translateX(-46px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes navbar-item-in {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes navbar-actions-in {
	from { opacity: 0; transform: translate(38px, 24px); }
	to { opacity: 1; transform: translate(0, 0); }
}

.navbar.navbar--animate-ready .navbar__logo {
	opacity: 0;
	animation: navbar-logo-in 0.72s ease forwards;
	animation-delay: var(--navbar-intro-delay, 80ms);
}

.navbar.navbar--animate-ready .navbar__list li {
	opacity: 0;
	animation: navbar-item-in 0.6s ease forwards;
	animation-delay: calc(var(--navbar-intro-delay, 80ms) + var(--nav-item-delay, 0.18s));
}

.navbar.navbar--animate-ready .navbar__actions {
	opacity: 0;
	animation: navbar-actions-in 0.72s ease forwards;
	animation-delay: calc(var(--navbar-intro-delay, 80ms) + 460ms);
}

/* ============================================
   NAVIGATION BAR — MOBILE & TABLET (≤1024px)
   ============================================ */

@media (max-width: 1024px) {
	/* Copied from the website, where its stated purpose is to stop horizontal overflow leaving fake
	   empty space on the right. It also does something less obvious that this application needs: it
	   makes the root element's overflow non-visible, so `body.nav-open { overflow: hidden }` below
	   stops propagating to the viewport. Without it, opening the menu removes the page's scrollbar
	   and everything jumps 15px sideways — which the website does not do.

	   Know what it costs: anything wider than the viewport is now silently clipped instead of
	   scrollable. A too-wide element does not announce itself with a scrollbar, it just loses its
	   edges — and if a flex parent centres it, it loses both of them, where no scrolling could have
	   reached the left one anyway. Check new pages at 390px rather than trusting the absence of a
	   horizontal scrollbar. */
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.navbar {
		padding: 12px var(--site-gutter-x, 16px);
	}

	.navbar__container {
		position: relative;
		width: 100%;
		max-width: 100%;
		flex-wrap: wrap;
		align-items: center;
		overflow: visible;
		padding: 10px 12px;
		border-radius: 999px;
		gap: 8px;
	}

	.navbar__logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.navbar__logo-img {
		height: 40px;
	}

	.navbar__hamburger {
		display: flex;
		order: 4;
		flex-shrink: 0;
		margin-left: 0;
		z-index: 2;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}

	.navbar__search {
		display: none;
	}

	.navbar__actions {
		display: flex;
		order: 3;
		margin-left: auto;
		gap: 8px;
	}

	.navbar__watchlist {
		min-width: 40px;
		min-height: 40px;
	}

	.navbar__actions .btn--navbar-primary {
		display: none;
	}

	.navbar__menu {
		order: 5;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		width: 100%;
		flex: none;
		display: none !important;
		margin-top: 0;
		border-radius: 14px;
		background: rgba(0, 0, 0, 0.88);
		backdrop-filter: blur(14px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
		z-index: 1002;
		max-height: min(80vh, 520px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.navbar__menu.active {
		display: block !important;
	}

	.navbar__list {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		width: 100%;
		padding: 2px 0;
	}

	.navbar__link {
		display: block;
		padding: 10px 14px;
		font-size: 13px;
		line-height: 18px;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.navbar__list li:last-child .navbar__link {
		border-bottom: none;
	}

	.navbar__mobile-cta {
		display: flex;
		padding: 10px 14px 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.navbar__mobile-cta .btn {
		width: 100%;
		justify-content: center;
	}

	.navbar.navbar--animate-ready .navbar__logo,
	.navbar.navbar--animate-ready .navbar__list li,
	.navbar.navbar--animate-ready .navbar__actions {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

body.nav-open {
	overflow: hidden;
}

/* 769, not 768: at exactly 768px the website falls through to the ≤1024px rule above, so the bar
   picks up the 32px tablet gutter for that one pixel of viewport width. */
@media (min-width: 769px) and (max-width: 1024px) {
	.navbar {
		padding: 16px;
	}

	.navbar__container {
		width: 100%;
		padding: 12px 16px;
		border-radius: 999px;
		flex-wrap: wrap;
	}

	.navbar__hamburger {
		display: flex;
	}
}

/* The website's general .btn rule for this range, which reaches the call to action in the open
   dropdown and makes it 52px rather than 56px tall. Scoped to the bar, like the base .btn copy. */
@media (min-width: 769px) and (max-width: 1024px) {
	.navbar .btn {
		min-width: 140px;
		padding: 12px 24px;
	}
}

@media (max-width: 480px) {
	.navbar__container {
		width: 100%;
		padding: 8px;
	}

	.navbar__logo-img {
		height: 40px;
	}

	.navbar__actions {
		gap: 12px;
	}

	.btn--navbar-primary {
		padding: 8px 16px;
		font-size: 14px;
	}

	/* The website's general .btn rule for this range. It comes after .btn--navbar-primary there and
	   so overrides the padding and size it just set, which is why the call to action ends up 52px
	   tall rather than 56px. Scoped to the bar, like the base .btn copy — and the scoping is what
	   keeps it winning here, since it is the same specificity as .btn--navbar-primary on the site. */
	.navbar .btn {
		width: 100%;
		min-width: auto;
		padding: 12px 24px;
		font-size: 14px;
	}
}

/* ============================================
   FOOTER — copied from the website
   ============================================ */

.footer {
	background: #312A2F;
	display: flex;
	padding: var(--space-10) var(--site-gutter-x) var(--space-4) var(--site-gutter-x);
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	align-self: stretch;
	overflow-x: hidden;

	/* Not on the website. This application's body is a flex column with min-height: 100vh, which is
	   what keeps the footer at the bottom of a short page; without this the footer is a flex item
	   and gets squeezed. The website's body is not a flex container, so it needs no equivalent. */
	flex-shrink: 0;
}

.footer__container {
	width: 100%;
	max-width: 1440px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.footer__content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
}

.footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__logo {
	width: 200px;
	height: auto;
	display: block;
}

.footer__description {
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: -0.14px !important;
	color: #FFF !important;
	margin: 0;
}

.footer__social {
	display: flex;
	gap: 12px;
}

.footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	transition: var(--transition-base);
	text-decoration: none;
}

.footer__social-link:hover {
	background: rgba(255, 102, 0, 0.2);
}

.footer__social-link img {
	width: 20px;
	height: 20px;
}

.footer__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

.footer__column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__column-title {
	font-family: var(--font-primary) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	letter-spacing: -0.064px !important;
	color: #FFFFFF !important;
	margin: 0;
}

.footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer__link {
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: normal !important;
	letter-spacing: -0.056px !important;
	color: #FFFFFF !important;
	text-decoration: none;
	transition: var(--transition-base);
}

.footer__link:hover {
	color: #FF6600;
}

.footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__newsletter-title {
	font-family: var(--font-primary) !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 34px !important;
	letter-spacing: -0.48px !important;
	color: #FFFFFF !important;
	margin: 0;
	text-transform: capitalize;
}

.footer__newsletter-form {
	display: flex;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 8px;
}

.footer__newsletter-input {
	flex: 1;
	background: rgba(255, 255, 255, 0.08) !important;
	border: none;
	color: #FFF !important;
	font-family: var(--font-primary) !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	line-height: 26px !important;
	letter-spacing: -0.18px !important;
	padding: 8px 12px;
	border-radius: 8px;
}

.footer__newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.footer__newsletter-button {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transition: var(--transition-base);
}

.footer__newsletter-button:hover {
	opacity: 0.8;
}

.footer__newsletter-button img {
	width: 20px;
	height: 20px;
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright {
	font-family: var(--font-primary) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: normal !important;
	letter-spacing: -0.064px !important;
	color: #FFF !important;
	margin: 0;
}

.footer__bottom-links {
	display: flex;
	gap: var(--site-gutter);
}

.footer__bottom-link {
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: normal !important;
	letter-spacing: -0.056px !important;
	color: #FFF !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: var(--transition-base);
}

.footer__bottom-link::after {
	content: "";
	width: 10px;
	height: 10px;
	background: url("arrow-tilt.png") center/contain no-repeat;
	flex-shrink: 0;
}

.footer__bottom-link:hover {
	color: #FFFFFF;
}

/* Not on the website — see the note above the NAVIGATION BAR section. This file's base rules
   underline every link on hover; the footer's links do not underline there. */
.footer a:hover {
	text-decoration: none;
}

.footer.footer--animate-ready .footer__brand {
	opacity: 0;
	transform: translateX(-48px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.footer.footer--animate-ready .footer__social-link {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.footer.footer--animate-ready .footer__links {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.footer.footer--animate-ready .footer__newsletter {
	opacity: 0;
	transform: translateX(48px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.footer.footer--animate-ready .footer__bottom {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer.footer--animate-ready.footer--in-view .footer__brand,
.footer.footer--animate-ready.footer--in-view .footer__social-link,
.footer.footer--animate-ready.footer--in-view .footer__links,
.footer.footer--animate-ready.footer--in-view .footer__newsletter,
.footer.footer--animate-ready.footer--in-view .footer__bottom {
	opacity: 1;
}

.footer.footer--animate-ready.footer--in-view .footer__brand {
	transform: translateX(0);
	transition-delay: 0.05s;
}

.footer.footer--animate-ready.footer--in-view .footer__links {
	transform: translateY(0);
	transition-delay: 0.18s;
}

.footer.footer--animate-ready.footer--in-view .footer__newsletter {
	transform: translateX(0);
	transition-delay: 0.28s;
}

.footer.footer--animate-ready.footer--in-view .footer__social-link {
	transform: translateY(0);
}

.footer.footer--animate-ready.footer--in-view .footer__social-link:nth-child(1) {
	transition-delay: 0.38s;
}

.footer.footer--animate-ready.footer--in-view .footer__social-link:nth-child(2) {
	transition-delay: 0.46s;
}

.footer.footer--animate-ready.footer--in-view .footer__social-link:nth-child(3) {
	transition-delay: 0.54s;
}

.footer.footer--animate-ready.footer--in-view .footer__bottom {
	transform: translateY(0);
	transition-delay: 0.62s;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.footer {
		padding: 64px 32px 24px 32px;
		gap: 40px;
		min-height: 547px;
	}

	.footer__container {
		gap: 40px;
	}

	.footer__content {
		grid-template-columns: minmax(460px, 1fr) minmax(240px, 270px);
		gap: 40px;
		align-items: start;
	}

	.footer__brand {
		grid-column: 1 / 2;
		grid-row: 1;
		max-width: 250px;
	}

	.footer__links {
		grid-column: 1 / 2;
		grid-row: 2;
		grid-template-columns: repeat(2, minmax(88px, 1fr));
		align-content: start;
		align-items: start;
		column-gap: 20px;
		row-gap: 40px;
		gap: 0;
	}

	.footer__newsletter {
		grid-column: 2 / 3;
		grid-row: 2;
		justify-self: end;
		width: 100%;
		max-width: 270px;
		align-self: start;
	}

	.footer__newsletter-title {
		font-size: 30px !important;
		line-height: 38px !important;
		letter-spacing: -0.3px !important;
	}

	.footer__newsletter-form {
		position: relative;
		min-height: 48px;
		padding-right: 44px;
	}

	.footer__newsletter-input {
		font-size: 22px !important;
		line-height: 30px !important;
		width: 100%;
		padding-right: 40px;
	}

	.footer__newsletter-button {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
	}

	.footer__bottom {
		align-items: center;
		gap: 16px;
		padding-top: 20px;
	}

	.footer__bottom-links {
		gap: 16px;
	}
}

/* The website's mobile design-system block, which lives at the end of its stylesheet and so wins
   over the ≤480px rules above it. */
@media (max-width: 767px) {
	.footer {
		padding: 64px var(--site-gutter-x) 24px;
		gap: 0;
		min-height: 0;
		align-items: stretch;
		border-radius: 0;
	}

	.footer__container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		gap: 40px;
	}

	.footer__content {
		display: flex;
		flex-direction: column;
		gap: 40px;
		grid-template-columns: none;
	}

	.footer__brand {
		max-width: none;
		gap: 16px;
	}

	.footer__logo {
		width: auto;
		max-width: 200px;
		height: auto;
	}

	.footer__description {
		font-size: 14px !important;
		line-height: 1.45 !important;
		letter-spacing: -0.01em !important;
		color: #ffffff !important;
	}

	.footer__social {
		gap: 12px;
		margin-top: 4px;
	}

	.footer__social-link {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.35);
	}

	.footer__social-link:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.5);
	}

	.footer__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
		row-gap: 0;
		gap: 0;
		width: 100%;
		align-items: start;
	}

	.footer__column {
		gap: 12px;
	}

	.footer__column-title {
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		color: #ffffff !important;
	}

	.footer__list {
		gap: 12px;
	}

	.footer__link {
		font-size: 14px !important;
		font-weight: 300 !important;
		line-height: 1.35 !important;
		color: #ffffff !important;
	}

	.footer__newsletter {
		width: 100%;
		gap: 16px;
	}

	.footer__newsletter-title {
		font-size: 20px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.02em !important;
		white-space: normal;
		text-transform: none;
		color: #ffffff !important;
	}

	.footer__newsletter-form {
		position: relative;
		display: block;
		width: 100%;
		min-height: 48px;
		padding: 0 48px 0 0;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 12px;
		box-sizing: border-box;
	}

	.footer__newsletter-input {
		width: 100%;
		box-sizing: border-box;
		background: transparent !important;
		font-size: 16px !important;
		font-weight: 300 !important;
		line-height: 1.4 !important;
		padding: 12px 16px;
		border-radius: 12px;
	}

	.footer__newsletter-input::placeholder {
		color: rgba(255, 255, 255, 0.5);
	}

	.footer__newsletter-button {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		padding: 0;
	}

	.footer__newsletter-button img {
		width: 20px;
		height: 20px;
	}

	.footer__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: 100%;
		padding-top: 0;
		border-top: none;
	}

	.footer__bottom-links {
		order: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 12px 20px;
		width: 100%;
	}

	.footer__bottom-link {
		font-size: 13px !important;
		line-height: 1.35 !important;
		color: #ffffff !important;
		text-align: center;
	}

	.footer__copyright {
		order: 2;
		width: 100%;
		margin: 0;
		font-size: 13px !important;
		font-weight: 300 !important;
		line-height: 1.35 !important;
		color: #ffffff !important;
		text-align: center;
	}
}

/* Not on the website — see the third bullet in the note above the NAVIGATION BAR section.
   The copied rules ask for Geist and several of them use !important to do it, so this has to be
   !important too, and it has to come after all of them: `.footer *` is the same specificity as
   `.footer__description`, so source order is what decides between two !important declarations. */
.navbar,
.navbar *,
.footer,
.footer * {
	font-family: var(--font-website-actual) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-md-h);
	padding: 0 28px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	border-radius: var(--radius-pill);
	border-width: 1px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-interactive);
	text-decoration: none;
}

.btn:focus-visible,
.btn:focus {
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.25);
	outline: none;
}

/* Primary — solid orange, the main action on a page. */
.btn-primary,
input.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
input.btn-primary:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #ffffff;
}

/* Secondary — soft orange, supporting actions. */
.btn-secondary,
input.btn-secondary,
span.btn-secondary {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
input.btn-secondary:hover,
span.btn-secondary:hover {
	background-color: var(--color-primary-soft-hover);
	border-color: var(--color-primary-soft-hover);
	color: var(--color-primary);
}

/* Outline — used by the Yes/No radio group. */
.btn-outline-primary {
	border-color: var(--color-border);
	color: var(--color-text-primary);
	background-color: #ffffff;
}

.btn-outline-primary:hover {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

/* Grouped pills keep their rounded ends rather than Bootstrap's squared inner edges. */
.btn-group {
	gap: 8px;
}

.btn-group > .btn,
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) {
	border-radius: var(--radius-pill) !important;
}

.btn-toolbar {
	gap: 8px;
}

/* ============================================
   PAGE SHELL

   The band, the tabs and the crumbs make the top of every page. Bootstrap 4's .container is the
   content wrapper, styled by the BASE section above.
   ============================================ */

/* The breadcrumb strip. The website has no breadcrumb of its own, so this follows its footer's
   quiet-link treatment rather than inventing a new one: plain text at the current level, orange
   for the levels you can go back to. */
.sky-crumbs {
	margin: 0 0 20px 0;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.14px;
	color: var(--color-text-muted);
}

.sky-crumbs .breadcrumb {
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.sky-crumbs .breadcrumb-item + .breadcrumb-item::before {
	color: var(--color-border);
	content: "\203A";
	padding: 0 10px;
}

.sky-crumbs .breadcrumb-item a {
	color: var(--color-text-secondary);
}

.sky-crumbs .breadcrumb-item a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.sky-crumbs .breadcrumb-item:last-child a {
	color: var(--color-text-primary);
	font-weight: 600;
	pointer-events: none;
}

/* ============================================
   READ-ONLY FIELDS

   Every field on this site is readonly: a valuation is something the client reads, not something
   they fill in. Bootstrap draws them as inputs anyway, so they are stripped back to the label and
   the value. The markup stays a real <input readonly> — it keeps the text selectable and
   copyable, which a <p> of the same text also does but a disabled input does not.
   ============================================ */

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	max-width: 100%;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.13px;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.form-control {
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text-primary);
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-input);
	height: auto;
	min-height: var(--btn-md-h);
	padding: 10px 16px;
}

.form-control:focus {
	background-color: #ffffff;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
	color: var(--color-text-primary);
}

.form-control[readonly] {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.18px;
	color: var(--color-text-primary);
}

/* The last field in a card has the card's own padding under it and needs none of its own. */
.card-body .form-group:last-child {
	margin-bottom: 0;
}

textarea.form-control[readonly] {
	font-family: var(--font-primary) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--color-text-secondary);
	height: auto !important;
	min-height: 0;
	resize: none;
	overflow: hidden;
}

/* ============================================
   CARDS

   Values from the website's cards, applied to Bootstrap 4's markup.
   ============================================ */

.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: #ffffff;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-body {
	padding: 24px;
}

.card-img-top {
	border-radius: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* A photo in the gallery. The card is the click target for the lightbox, so it lifts on hover the
   way the website's product cards do; the read-only detail card above it does not, because
   nothing happens when you click that one. */
.sky-photos .card:hover {
	border-color: #c3c7d6;
	box-shadow: var(--shadow-interactive);
	transform: translateY(-2px);
}

.sky-photos .card {
	margin-top: 0 !important;
}

.sky-photos > [class*="col-"] {
	margin-bottom: var(--space-3);
}

/* ============================================
   FIGURES

   The two totals on the valuation page, and the pair on a product. The website's own numbers - the
   sold totals on its homepage - are set in this weight and size.
   ============================================ */

.sky-figures {
	margin-bottom: var(--space-3);
}

.sky-figure {
	height: 100%;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	background: var(--color-surface-muted);
}

.sky-figure__label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.sky-figure__value {
	margin: 6px 0 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 42px;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
}

/* A section heading in the flow of the page ("Note", "Photos"). */
.sky-heading {
	margin: 0 0 12px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
}

/* Copy that introduces a page, constrained to a comfortable measure. */
.sky-lede {
	max-width: 760px;
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.18px;
}

/* ============================================
   THE PRODUCT TILES - copied from the website

   The product listing is the website's own, from `Web/event.php` and the matching blocks of its
   `Web/styles.css`: the same `.event-product-grid` of `.event-product-card` articles, the same
   `.event-sort` links above it and the same `.event-search` box under them. The class names are its
   class names for the same reason the navigation is: so these rules can be a copy rather than an
   approximation, and so the two listings stay recognisably one design.

   Three deliberate differences, all of them because a tender item is not a lot in a live catalogue:

   - The bottom of the card carries the website's call to action and nothing else. Where it shows a
     price, this site shows no figure at all: the valuation's lower and upper are the valuer's
     estimate of what the item would fetch, and this is the site the people bidding on it read. The
     sister site at valuation.skylarc.co.nz is where those figures belong, and this application has
     never selected them.
   - Nothing to order by except the title, for the same reason. Sorting by value on a page that
     hides the values would hand a buyer the ranking it is withholding.
   - No status pill, no Trade Me badge, no countdown, no watchlist heart. None of them mean anything
     here, and the watchlist is the website's localStorage, which this origin cannot read.
   - No "Show N per row" control. It belongs to the website's own `--event-grid-columns` and its
     compact variant, which is a further eighty rules for a control this site does not need; the
     grid keeps the website's four columns on a desktop and its fluid auto-fill below that.
   ============================================ */

/* The website's text input, which the search box is one of. Its custom properties come from the
   website's :root too, kept spelled its way like the rest of the copied blocks. */
:root {
	--input-font: var(--font-primary);
	--input-radius: 8px;
	--input-border: 1px solid var(--color-border-input);
	--input-color: var(--color-text-primary);
	--input-bg: var(--color-bg-input);
	--input-placeholder: var(--color-text-secondary);
	--input-font-size: 14px;
	--input-line-height: 20px;
	--input-px: var(--space-2);
	--input-h-md: 40px;
	--input-focus-border: var(--color-primary);
}

.sk-input {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--input-font);
	font-size: var(--input-font-size);
	font-weight: 400;
	line-height: var(--input-line-height);
	color: var(--input-color);
	background: var(--input-bg);
	border: var(--input-border);
	border-radius: var(--input-radius);
	outline: none;
	transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.sk-input::placeholder {
	color: var(--input-placeholder);
}

.sk-input:focus {
	border-color: var(--input-focus-border);
	background: var(--color-bg-input);
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
}

.sk-input--md {
	height: var(--input-h-md);
	padding: 0 var(--input-px);
}

.event-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
}

.event-sort__label {
	color: var(--color-text-secondary);
	font-size: 14px;
	font-weight: 600;
	margin-right: 4px;
}

.event-sort__option {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	background: #f2f3f6;
	color: var(--color-text-secondary);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.event-sort__option:hover {
	background: #e8eaef;
	color: #31292f;
	text-decoration: none;
}

.event-sort__option--active,
.event-sort__option--active:hover {
	background: var(--color-primary);
	color: #ffffff;
}

.event-search {
	margin-bottom: 24px;
}

.event-search__wrap {
	position: relative;
	max-width: 420px;
}

.event-search__input {
	width: 100%;
	padding-right: 38px;
}

.event-search__icon {
	position: absolute;
	right: 12px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}

.event-empty {
	padding: 48px 0;
	text-align: center;
	color: var(--color-text-secondary);
	font-size: 16px;
}

.event-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}

.event-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #ffffff;
	padding: 10px;
	margin: 8px;
}

.event-product-card__image-wrap {
	position: relative;
	height: 240px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-surface-muted);
	margin-bottom: 14px;
}

.event-product-card__image-wrap a {
	display: block;
	height: 100%;
}

.event-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.event-product-card__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px 8px;
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.event-product-card__title {
	margin: 4px 0 0;
	color: var(--color-text-primary);
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: -0.01em;
	min-height: 52px;
}

.event-product-card__title-link {
	color: inherit;
	text-decoration: none;
}

.event-product-card__title-link:hover {
	color: inherit;
	text-decoration: underline;
}

.event-product-card__ref {
	margin: 6px 0 0;
	color: var(--color-text-muted);
	font-size: 12px;
}

.event-product-card__desc {
	margin: 10px 0 0;
	color: var(--color-text-secondary);
	font-size: 13px;
	line-height: 19px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.event-product-card__bottom {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #eceff3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.event-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	border-radius: 999px;
	background: var(--color-primary);
	color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	padding: 10px 18px;
}

.event-product-card__cta:hover {
	background: var(--color-primary-dark);
	color: #ffffff;
	text-decoration: none;
}

/* Not on the website either. The product you last opened, so that coming back from it you can see
   where you were - which is what the row highlight in the table this replaced was for. */
.event-product-card--active {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
}

/* A product with no photo of its own. The website has no such card - every lot it lists has a
   picture - so this is the muted surface the image sits on, left empty and labelled. */
.event-product-card__image-wrap--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-size: 13px;
}

@media (min-width: 1024px) {
	.event-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================
   BUTTONS THE PAGES ACTUALLY RENDER

   ui::post_button() and the grid's pager both ask for .btn-dark, which is Bootstrap's near-black.
   The website has no such button, so they are drawn as its supporting action instead: soft orange.
   The BUTTONS section above gives them their shape.
   ============================================ */

.btn-dark,
a.btn-dark,
input.btn-dark,
span.btn-dark,
select.btn-dark {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}

.btn-dark:hover,
a.btn-dark:hover,
input.btn-dark:hover,
select.btn-dark:hover {
	background-color: var(--color-primary-soft-hover);
	border-color: var(--color-primary-soft-hover);
	color: var(--color-primary);
}

span.btn-dark.disabled,
.btn-dark.disabled {
	background-color: var(--color-surface-muted);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	opacity: 1;
}

/* The pager's page chooser is a <select> wearing .btn, so it needs the height the shape gives the
   others and none of the browser's own chrome. */
select.btn-dark {
	height: var(--btn-md-h);
	padding: 0 16px;
	font-weight: 600;
}

.btn-toolbar {
	flex-wrap: wrap;
}

/* ============================================
   MESSAGES

   The alert the pages raise on a bad or missing uid.
   ============================================ */

.alert {
	border: none;
	border-radius: var(--radius-panel);
	padding: 16px 20px;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: var(--space-3);
}

.alert-danger {
	background-color: var(--color-primary-soft);
	color: var(--color-primary-dark);
}

.alert .close {
	color: inherit;
	opacity: 0.6;
	padding: 16px 20px;
	text-shadow: none;
}

.alert .close:hover {
	color: inherit;
	opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
	.sky-header {
		padding: 110px 16px 40px 16px;
		margin-bottom: 32px;
	}

	.sky-title h1 {
		font-size: 34px;
	}

	.sky-title p {
		font-size: 16px;
		line-height: 24px;
		margin-top: 12px;
	}

	.sky-figure {
		padding: 20px;
	}

	.sky-figure__value {
		font-size: 26px;
		line-height: 34px;
	}

	/* The website's own mobile listing: one card per row, and the supporting text off the card. */
	.event-product-grid {
		grid-template-columns: 1fr;
	}

	.event-product-card__ref,
	.event-product-card__desc {
		display: none;
	}

	.event-sort {
		margin-bottom: 24px;
	}

	body > .container {
		padding-bottom: 48px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sky-header {
		padding: 120px 24px 48px 24px;
	}

	.sky-title h1 {
		font-size: 44px;
	}
}