/* ---------- Design tokens ----------
   The Perfumer's Organ. Cool graphite shelf over cool paper; achromatic
   throughout except amber, which is reserved for the fill gauge so that
   chroma on this site always means liquid volume. Warm cream and terracotta
   are deliberately absent: that pairing is the category's default surface and
   the thing this redesign exists to leave behind. */
:root {
	/* Surfaces */
	--paper: #efefeb;          /* marketplace ground, cool not cream */
	--surface: #f8f8f5;        /* raised: cards, panels, inputs */
	--shelf: #16181a;          /* the shelf band: header + hero */
	--shelf-raised: #212528;   /* raised within the shelf */

	/* Ink */
	--ink: #16181a;
	--ink-2: #5b6063;          /* secondary */
	--ink-3: #63686b;          /* micro labels; darkened to clear AA on paper */
	--on-shelf: #eceae5;
	--on-shelf-2: #9aa0a3;

	/* Rules. Hairlines carry structure here in place of borders and cards. */
	--rule: #dcdcd5;
	--rule-strong: #c3c3ba;
	--rule-on-shelf: rgba(236, 234, 229, 0.16);

	/* The only chroma in the system. Amber is the juice in the bottle: it
	   appears on fill gauges and nowhere decorative. */
	--amber: #b57814;          /* clears 3:1 as a graphic on both grounds */
	--amber-bright: #e0a338;
	--amber-track: rgba(201, 135, 28, 0.16);

	--danger: #9e3b32;
	--success: #3f6b4f;

	/* Type. Piazzolla carries editorial voice, Archivo the interface, Azeret
	   Mono only measured data: codes, volumes, percentages, prices. */
	--font-display: 'Piazzolla', Georgia, serif;
	--font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
	--font-data: 'Azeret Mono', ui-monospace, SFMono-Regular, monospace;

	--text-micro: 11px;
	--text-sm: 13px;
	--text-base: 16px;
	--text-lg: 20px;
	--text-xl: 28px;
	--text-2xl: 40px;
	--text-display: clamp(2.75rem, 5.6vw, 5rem);

	/* Space, 4 base. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;
	--space-22: 88px;
	--space-28: 112px;

	/* Radius. Deliberately small. Pills are for status chips only; specimen
	   photography is square-cornered. */
	--r-sm: 3px;
	--r-md: 5px;
	--r-lg: 8px;
	--r-pill: 999px;
	--r-image: 0px;

	/* Legacy aliases so existing component rules keep resolving. */
	--radius: var(--r-md);
	--radius-tag: var(--r-pill);
	--radius-pill: var(--r-sm);
	--cream: var(--paper);
	--cream-dark: #e3e3dc;
	--card: var(--surface);
	--line: var(--rule);
	--gold: var(--ink);
	--gold-dark: var(--ink);
	--ink-soft: var(--ink-2);
	--action: var(--ink);
	--action-hover: #000;
	--sell: var(--ink);
	--sell-hover: #000;
	--cream-veil: rgba(239, 239, 235, 0.94);

	/* Motion. One easing, no overshoot. */
	--ease: cubic-bezier(0.22, 0.61, 0.24, 1);
	--dur-fast: 150ms;
	--dur: 220ms;
	--dur-slow: 480ms;

	/* Measure */
	--container: 1360px;
	--gutter: clamp(20px, 3.5vw, 56px);

	--shadow: none;
	--shadow-lift: 0 1px 0 var(--rule-strong);

	/* Condition scale, kept achromatic so amber stays unique to volume.
	   Rank is carried by ink weight and a leading tick, not by hue. */
	--cond-new-bg: #e4e6e2;
	--cond-new-fg: #24302a;
	--cond-likenew-bg: #e8e8e3;
	--cond-likenew-fg: #3a423d;
	--cond-gently-bg: #ecebe6;
	--cond-gently-fg: #5b6063;
	--cond-well-bg: #efeee9;
	--cond-well-fg: #767b7e;
}

* { box-sizing: border-box; }

/* Available to structure that screen readers need and the layout does not. */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The UA rule for [hidden] is display:none at the same specificity as any
   class, so a later `.thing { display: flex }` silently beats it and the
   element stays visible. Make the attribute authoritative instead. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Piazzolla carries the editorial voice. Its optical-size axis is set from the
   role, so display sizes get the tighter, higher-contrast cut and small
   headings stay sturdy. No synthetic weights, no stroke tricks. */
h1, h2, h3, .brand-font {
	font-family: var(--font-display);
	font-weight: 600;
	font-variation-settings: 'opsz' 30;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Explicit type scale. Headings previously carried no font-size at all and
   fell through to the UA defaults, so the top of the hierarchy was accidental
   and sat too close to body copy. Steps are ~1.3x apart. */
h1 { font-size: var(--text-2xl); line-height: 1.08; }
h2 { font-size: var(--text-xl); line-height: 1.15; }
h3 { font-size: var(--text-lg); line-height: 1.25; font-variation-settings: 'opsz' 14; }

/* Measured data only: volumes, fill percentages, batch codes, prices, counts.
   Not a costume for "technical", these are literally measurements. */
.data, .spec-value, .listing-card .price, .detail-price,
.offer-row .offer-amount, .auction-current {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'zero' 1;
}

/* The label that sits above a ruled column. */
.col-label {
	font-family: var(--font-data);
	font-size: var(--text-micro);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Form controls do not inherit typography, so any control without an explicit
   size falls back to the UA default (13.33px for button in Chrome) and quietly
   adds an off-scale step next to --text-sm. Explicit rules below still win. */
button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* Surfaces the browser draws for us. Left alone they ship system blue and grey
   into an otherwise warm palette, which is the tell that a page was assembled
   rather than built. */
::selection { background: var(--ink); color: var(--paper); }
input, textarea, select { caret-color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--rule-strong);
	border-radius: var(--r-pill);
	/* Inset so it reads as a rail rather than a filled gutter. */
	border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Prices and bid amounts get compared column to column, so their digits need
   to line up rather than kern like prose. */
.listing-card .price,
.detail-price,
.offer-row .offer-amount,
.auction-current,
.bid-history-row span:last-child,
.spec-grid .spec-value {
	font-variant-numeric: tabular-nums;
}

/* Keyboard focus. :focus-visible keeps the ring off mouse clicks but always
   shows it for tab navigation, which otherwise left no visible position. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
/* The shelf inverts the ring; an ink outline vanishes on graphite. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible { outline-color: var(--on-shelf); }
/* Except the two light blocks sitting in that band: on paper the light ring
   disappears, so those invert back to ink. */
.header-search button:focus-visible,
.site-header .btn-on-shelf:focus-visible {
	outline-color: var(--ink);
	outline-offset: -4px;
}
/* On dark or photographic backgrounds the accent-coloured ring disappears,
   so those get a light ring instead. */
.hero-photo a:focus-visible,
.like-btn:focus-visible,
.thread-bubble-row.mine a:focus-visible {
	outline-color: var(--paper);
	box-shadow: 0 0 0 4px rgba(22, 24, 26, 0.5);
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ---------- Header: the shelf band ----------
   Header and hero share one graphite field. The shelf sits above the working
   surface; the marketplace below it is paper. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--shelf);
	color: var(--on-shelf);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Once the page moves, the band separates from the content under it. Nothing
   more theatrical than a hairline and a touch of opacity. */
.site-header.is-scrolled {
	background: rgba(22, 24, 26, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom-color: var(--rule-on-shelf);
}

.site-header .header-main {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	height: 68px;
}

.logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-variation-settings: 'opsz' 30;
	font-size: var(--text-lg);
	letter-spacing: -0.02em;
	color: var(--on-shelf);
	flex-shrink: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}
/* The wordmark's second syllable takes the fill amber, the one place the
   brand borrows the system's only chroma. */
.logo span { color: var(--amber-bright); }

/* Search is the marketplace's spine, so it holds the centre. The submit sits
   in a filled block at the end of the field: the same paper the header's own
   button uses, so the two light blocks in the band match rather than
   introducing a third tone. */
.header-search {
	flex: 1;
	max-width: 680px;
	display: flex;
	align-items: stretch;
	height: 38px;
	/* Padding on the input side only; the submit block runs flush to the end. */
	padding: 0 0 0 var(--space-3);
	background: var(--shelf-raised);
	border: 1px solid var(--rule-on-shelf);
	border-radius: var(--r-md);
	/* Clips the block's corners to the field's own radius. */
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header-search:focus-within {
	border-color: var(--on-shelf-2);
	background: #262a2e;
}
.header-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0;
	font-size: var(--text-sm);
	color: var(--on-shelf);
	outline: none;
}
.header-search input::placeholder { color: var(--on-shelf-2); }

.header-search button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	flex-shrink: 0;
	border: none;
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	padding: 0;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.header-search button:hover { background: #fff; }
.header-search button svg { width: 17px; height: 17px; }

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	margin-left: auto;
}

.icon-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	color: var(--on-shelf-2);
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-link:hover { color: var(--on-shelf); background: var(--shelf-raised); }
.icon-link svg { width: 18px; height: 18px; }
.label-short { display: none; }

.icon-link .icon-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--amber);
	color: var(--shelf);
	font-family: var(--font-data);
	font-size: 9px;
	font-weight: 500;
	line-height: 1;
	padding: 2px var(--space-1);
	border-radius: var(--r-pill);
	min-width: 14px;
	text-align: center;
}

/* Category row: the taxonomy strip. Browse only, no actions. */
.header-categories { border-top: 1px solid var(--rule-on-shelf); }
.category-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	padding: var(--space-3) 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.category-row::-webkit-scrollbar { display: none; }
.category-row a {
	position: relative;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--on-shelf-2);
	white-space: nowrap;
	/* Horizontal padding lifts each link over the 24px minimum target. */
	padding: var(--space-2) var(--space-2);
	transition: color var(--dur-fast) var(--ease);
}
.category-row a:hover { color: var(--on-shelf); }
/* The active rule is drawn, not toggled: it grows from the left edge. */
.category-row a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 6px;
	height: 1px;
	width: 100%;
	background: var(--on-shelf);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.category-row a.active { color: var(--on-shelf); }
.category-row a.active::after { transform: scaleX(1); }

/* ---------- Account menu ---------- */
.account-menu { position: relative; }

.account-avatar-btn {
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	display: flex;
	border-radius: 50%;
}
.account-avatar-btn:hover .avatar { box-shadow: 0 0 0 2px var(--cream-dark); }

.account-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	min-width: 220px;
	padding: var(--space-2);
	z-index: 60;
	flex-direction: column;
}
.account-dropdown.open { display: flex; }

.account-dropdown-header {
	padding: var(--space-3) var(--space-3) var(--space-2);
	font-size: var(--text-sm);
	color: var(--ink-soft);
	line-height: 1.4;
}
.account-dropdown-header strong { color: var(--ink); }

.account-dropdown a,
.account-dropdown button {
	display: block;
	width: 100%;
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-radius: 8px;
	font-size: var(--text-sm);
	font-family: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--ink);
}
.account-dropdown a:hover,
.account-dropdown button:hover { background: var(--cream-dark); }

.account-dropdown-divider { border-top: 1px solid var(--line); margin: var(--space-2) var(--space-1); }

#account-logout { color: var(--danger); }

/* ---------- Buttons ----------
   Rectangular with a small radius. Emphasis comes from fill and weight, not
   from shape; the pill is reserved for status chips. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 11px var(--space-5);
	min-height: 40px;
	border-radius: var(--r-sm);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }

/* Same weight as primary, kept as its own name because the selling path is a
   distinct destination rather than the surface's own action. */
.btn-gold { background: var(--ink); color: var(--paper); }
.btn-gold:hover { background: #000; }

.btn-outline { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); }

.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--paper); }

/* On the graphite band the polarity inverts. */
.btn-on-shelf { background: var(--paper); color: var(--ink); }
.btn-on-shelf:hover { background: #fff; }
.btn-ghost-shelf { background: transparent; border-color: var(--rule-on-shelf); color: var(--on-shelf); }
.btn-ghost-shelf:hover { border-color: var(--on-shelf-2); background: var(--shelf-raised); }

.btn-sm { padding: 7px var(--space-4); min-height: 34px; font-size: var(--text-sm); }
.btn-lg { padding: 14px var(--space-7); min-height: 48px; font-size: var(--text-base); }
.btn-block { width: 100%; }

/* ---------- Demo mode banner ---------- */
.demo-banner {
	background: #fff7e6;
	border-bottom: 1px solid #eddba8;
	color: #7a5a17;
	font-size: var(--text-sm);
	text-align: center;
	padding: var(--space-2) var(--space-4);
}
.demo-banner strong { font-weight: 700; }

/* ---------- Hero: the shelf ----------
   The fragrance photograph spans the whole shelf. Its outpainted shadow on
   the left gives the editorial copy a quiet, readable field. */
.hero {
	position: relative;
	background-color: var(--shelf);
	background-image:
		linear-gradient(90deg, rgba(10, 11, 12, 0.38) 0%, rgba(10, 11, 12, 0.16) 43%, rgba(10, 11, 12, 0) 68%),
		url('../images/hero-spray-wide.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--on-shelf);
	min-height: clamp(560px, 62vw, 740px);
	display: flex;
	align-items: center;
	padding: var(--space-16) 0;
}
.hero-grid {
	width: 100%;
}
.hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 640px;
}

.hero-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-variation-settings: 'opsz' 30;
	font-size: var(--text-display);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--on-shelf);
	margin: 0 0 var(--space-6);
	text-wrap: initial; /* the line breaks are authored */
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* ---------- Specimen: how Vial frames a bottle ----------
   Hard edges, no rounding, no tilt, no shadow. The photograph is the object;
   measurement belongs to real listings, not to the hero's staging. */
.specimen { margin: 0; display: flex; flex-direction: column; }
.specimen-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-image);
	background: var(--shelf-raised);
}
.specimen-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.specimen-hero .specimen-frame { aspect-ratio: 4 / 3; }



/* ---------- Homepage sections ---------- */
/* The heading rule draws along its length on arrival; a catalogue line being
   ruled rather than a block fading in. */
.section-head.rule-pending { border-bottom-color: transparent; position: relative; }
.section-head.rule-pending::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--rule);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 620ms var(--ease);
}
.section-head.rule-drawn::after { transform: scaleX(1); }

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--rule);
}
.section-head h2 { margin: 0; font-size: var(--text-xl); }
.section-sub { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }

/* One measured line of trust facts, sitting on a rule. Replaces the three
   icon-and-heading cards that used to carry this. */
.ledger-strip {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.ledger-strip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-5);
	padding: var(--space-4) var(--gutter);
	font-family: var(--font-data);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	color: var(--ink-2);
	text-align: center;
}
.ledger-dot {
	width: 3px;
	height: 3px;
	background: var(--rule-strong);
	border-radius: 50%;
	flex-shrink: 0;
}

.recent-section { padding: var(--space-16) 0 var(--space-14); }

/* Zero-inventory state for the homepage. A band on a rule rather than a
   centred message adrift in empty space. */
.cold-start {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	flex-wrap: wrap;
	border-top: 1px solid var(--ink);
	padding-top: var(--space-8);
}
.cold-start-copy h2 { margin: 0 0 var(--space-3); }
.cold-start-copy p {
	margin: 0;
	color: var(--ink-2);
	max-width: 48ch;
	line-height: 1.6;
}

@media (max-width: 640px) {
	.cold-start { gap: var(--space-6); }
	.cold-start .btn { width: 100%; }
}

/* ---------- The organ: taxonomy as an index ---------- */
.organ {
	padding: var(--space-16) 0 var(--space-22);
	border-top: 1px solid var(--rule);
}
.organ-index {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--space-12);
}
.organ-row {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--rule);
}
.organ-no {
	font-size: var(--text-micro);
	color: var(--ink-3);
	transition: color var(--dur) var(--ease);
}
.organ-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-variation-settings: 'opsz' 14;
	font-size: var(--text-lg);
	text-transform: capitalize;
	color: var(--ink);
	transition: transform var(--dur) var(--ease);
	transform-origin: left;
}
/* The rule draws in from the left on hover: a shelf label being underlined,
   not a card lifting. */
.organ-rule {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.organ-row:hover .organ-rule,
.organ-row:focus-visible .organ-rule { transform: scaleX(1); }
.organ-row:hover .organ-no { color: var(--ink); }
.organ-row:hover .organ-name { transform: translateX(var(--space-2)); }

/* ---------- Sell strip ---------- */
.sell-strip {
	background: var(--shelf);
	color: var(--on-shelf);
	padding: var(--space-16) 0;
}
.sell-strip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	flex-wrap: wrap;
}
.sell-strip h2 { margin: 0 0 var(--space-2); color: var(--on-shelf); }
.sell-strip .section-sub { color: var(--on-shelf-2); max-width: 52ch; }
.sell-strip .btn-primary { background: var(--paper); color: var(--ink); }
.sell-strip .btn-primary:hover { background: #fff; }

/* ---------- Browse layout ---------- */
.browse-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-12);
	padding: var(--space-12) 0 var(--space-22);
	align-items: start;
}

.filters {
	background: transparent;
	border: none;
	border-top: 1px solid var(--ink);
	border-radius: 0;
	padding: var(--space-4) 0 0;
	position: sticky;
	top: 124px;
}

/* The group labels below already announce themselves; a second heading over
   them was redundant shouting. */
/* The group labels below announce themselves; a visible heading over them was
   redundant, but the landmark stays for screen readers. */

.filters-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: var(--space-2) var(--space-4);
	min-height: 40px;
	cursor: pointer;
	margin-bottom: var(--space-4);
	align-self: start;
}
.filters-toggle:hover { border-color: var(--ink); }

.filter-group {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--rule);
}
.filter-group:last-of-type { border-bottom: none; }

/* Group labels share the column-label grammar used across the system. */
.filter-group > label:first-child,
.filter-group > label[for] {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin-bottom: var(--space-3);
}

.filter-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	padding: var(--space-1) 0;
	cursor: pointer;
	color: var(--ink-2);
	transition: color var(--dur-fast) var(--ease);
}
.filter-option:hover { color: var(--ink); }
.filter-option input { accent-color: var(--ink); width: 16px; height: 16px; flex-shrink: 0; }
.filter-option { min-height: 28px; }

.price-range { display: flex; align-items: center; gap: var(--space-2); }
.price-range input {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	font-family: var(--font-data);
	font-size: var(--text-sm);
	background: var(--surface);
}

select {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	background: var(--surface);
	color: var(--ink);
}

.clear-filters {
	margin-top: var(--space-5);
	font-size: var(--text-sm);
	color: var(--ink-2);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.clear-filters:hover { color: var(--ink); }

.results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--ink);
}
.results-count {
	font-family: var(--font-data);
	font-size: var(--text-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.results-bar select { width: auto; }

/* ---------- Listing grid & card ----------
   Photography carries the card. No border, no shadow, no lift: the frame is
   the object and the metadata sits under it on a rule, like a plate caption. */
.listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: var(--space-10) var(--space-6);
}

.listing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: 0;
}

.listing-card .thumb {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface);
	border-radius: var(--r-image);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
}
.listing-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
/* Controlled zoom inside a fixed frame: the card never moves, only the image. */
.listing-card:hover .thumb img { transform: scale(1.025); }
.thumb-icon svg { width: 34%; height: 34%; }

/* The fill gauge. It reports a listing's real remaining volume and is the only
   place amber appears, so chroma on this site always means liquid. Laid along
   the frame's bottom edge, inset from it so it is not read as a border. */
.card-gauge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: rgba(22, 24, 26, 0.16);
	box-shadow: inset 0 1px 0 rgba(22, 24, 26, 0.12);
}
.card-gauge span {
	display: block;
	height: 100%;
	width: var(--fill, 0%);
	background: var(--amber);
}

.like-btn {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: var(--r-sm);
	background: rgba(248, 248, 245, 0.92);
	border: none;
	color: var(--ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.listing-card:hover .like-btn,
.like-btn:focus-visible,
.like-btn.active { opacity: 1; }
.like-btn:hover { color: var(--ink); }
.like-btn.active { color: var(--ink); }
/* Touch has no hover, so the control stays visible there. */
@media (hover: none) { .like-btn { opacity: 1; } }

.badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	background: var(--shelf);
	color: var(--on-shelf);
	font-family: var(--font-data);
	font-size: 10px;
	font-weight: 500;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--r-sm);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.badge.sold { background: var(--danger); }

.listing-card .info {
	padding: var(--space-3) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.listing-card .brand {
	font-family: var(--font-data);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-3);
}
.listing-card .meta {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--font-data);
	font-size: var(--text-micro);
	letter-spacing: 0.06em;
	color: var(--ink-2);
	margin: var(--space-1) 0 var(--space-2);
}
/* Card metadata reads as a measured line, not a row of chips. */
.listing-card .meta .chip {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}
.listing-card .meta .chip + .chip::before {
	content: '·';
	margin-right: var(--space-2);
	color: var(--rule-strong);
}
.listing-card .price {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--ink);
}

.chip {
	display: inline-block;
	background: var(--cream-dark);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--r-pill);
	font-size: var(--text-micro);
	letter-spacing: 0.04em;
}

/* ---------- Empty, gated and error states ---------- */
/* These sit on the page ground rather than inside a card. A marketplace with
   nothing in it reads as broken if the nothing is boxed and centred like a
   widget; open space plus a real next action reads as early. */
.empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-10) var(--space-5);
	color: var(--ink-2);
}
.empty-state.is-feature { padding: var(--space-16) var(--space-5); }

.empty-icon {
	display: block;
	color: var(--gold-dark);
	margin-bottom: var(--space-5);
	opacity: 0.85;
}
.empty-icon svg { width: 30px; height: 30px; }
.is-feature .empty-icon svg { width: 38px; height: 38px; }

.empty-title {
	margin: 0 0 var(--space-3);
	color: var(--ink);
	font-size: var(--text-lg);
}
/* On a gate or cold-start page this title is the entire content, so it takes
   the page-title step rather than the section one. */
.is-feature .empty-title { font-size: var(--text-2xl); }

.empty-body {
	margin: 0;
	/* Held well under the 65-75ch body measure: this is a short aside, and a
	   full-measure line centred under a heading reads as a paragraph. */
	max-width: 46ch;
	font-size: var(--text-base);
	line-height: 1.55;
}

.empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
/* Condition chip. Ranked by tint so a grid can be scanned for the best-kept
   bottles without reading every card; the wording stays put regardless. */
.chip-condition { font-weight: 600; }
.chip-condition[data-condition="new"] { background: var(--cond-new-bg); color: var(--cond-new-fg); }
.chip-condition[data-condition="like_new"] { background: var(--cond-likenew-bg); color: var(--cond-likenew-fg); }
.chip-condition[data-condition="gently_used"] { background: var(--cond-gently-bg); color: var(--cond-gently-fg); }
.chip-condition[data-condition="well_used"] { background: var(--cond-well-bg); color: var(--cond-well-fg); }

.empty-state a:not(.btn) {
	color: var(--gold-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Listing detail ----------
   The densest specimen treatment in the product. The spec block uses the same
   ruled formula grammar the hero introduces. */
.listing-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(var(--space-8), 4vw, var(--space-14));
	padding: var(--space-12) 0 var(--space-22);
}

.gallery-main {
	aspect-ratio: 4 / 5;
	background: var(--surface);
	border-radius: var(--r-image);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	overflow: hidden;
	margin-bottom: var(--space-3);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .thumb-icon svg { width: 72px; height: 72px; }

.gallery-thumbs { display: flex; gap: var(--space-2); }
.gallery-thumbs .t {
	width: 60px;
	height: 60px;
	border-radius: var(--r-image);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid transparent;
	color: var(--ink-3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease);
}
.gallery-thumbs .t .thumb-icon svg { width: 22px; height: 22px; }
.gallery-thumbs .t.active { border-color: var(--ink); }

.detail-brand {
	font-family: var(--font-data);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-3);
}
.detail-title {
	font-size: var(--text-2xl);
	line-height: 1.05;
	margin: var(--space-2) 0 var(--space-4);
}
.detail-price {
	font-size: var(--text-xl);
	font-weight: 500;
	margin-bottom: var(--space-6);
}

/* The formula block again: term left, measured value right, hairline between.
   No card, no fill, no grid of boxes. */
.spec-grid {
	display: block;
	background: none;
	border: none;
	border-top: 1px solid var(--ink);
	border-radius: 0;
	padding: 0;
	margin-bottom: var(--space-7);
}
.spec-grid > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--rule);
}
.spec-grid .spec-label {
	font-size: var(--text-sm);
	color: var(--ink-2);
	text-transform: none;
	letter-spacing: 0;
}
.spec-grid .spec-value {
	font-family: var(--font-data);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--ink);
	text-align: right;
}

.notes-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.notes-tags .chip {
	background: transparent;
	border: 1px solid var(--rule-strong);
	color: var(--ink-2);
	font-family: var(--font-data);
	font-size: var(--text-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--r-pill);
}

.detail-description {
	color: var(--ink-2);
	max-width: 68ch;
	line-height: 1.65;
	margin-bottom: var(--space-7);
	white-space: pre-wrap;
}

.action-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }

/* Seller identity sits on a rule, not inside a panel: this is a line of
   provenance, not a widget. */
.seller-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: none;
	border: none;
	border-top: 1px solid var(--rule);
	border-radius: 0;
	padding: var(--space-4) 0 0;
}
.avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--shelf);
	color: var(--on-shelf);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	flex-shrink: 0;
	object-fit: cover;
}
.seller-name { font-weight: 600; font-size: var(--text-sm); }
.seller-loc {
	font-family: var(--font-data);
	font-size: var(--text-micro);
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

/* ---------- Forms / auth / sell ---------- */
.form-page {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-16) 0 var(--space-22);
}

.card-panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-8);
}

.form-row { margin-bottom: var(--space-5); }
.form-row label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: var(--space-2);
}
.form-row .hint { font-size: var(--text-micro); color: var(--ink-soft); margin-top: var(--space-1); }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
	width: 100%;
	padding: var(--space-3) var(--space-3);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--text-sm);
	background: #fff;
}
.form-row textarea { resize: vertical; min-height: 100px; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.tag-select { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-select label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--cream-dark);
	border: 1px solid var(--line);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-tag);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
}
.tag-select input:checked + span,
.tag-select label:has(input:checked) {
	background: var(--ink);
	color: var(--cream);
	border-color: var(--ink);
}

.image-drop {
	border: 2px dashed var(--line);
	border-radius: var(--radius);
	padding: var(--space-6);
	text-align: center;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	cursor: pointer;
}
.image-drop:hover { border-color: var(--gold); }

.image-preview-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.image-preview-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.form-msg { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: 8px; margin-bottom: var(--space-4); }
.form-msg.error { background: #fbe9e7; color: var(--danger); }
.form-msg.success { background: #e9f5ec; color: var(--success); }

.auth-toggle { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); }
.auth-toggle a {
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-block;
	padding: var(--space-2) var(--space-1);
}

/* ---------- Profile page ---------- */
.profile-header {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-12) 0 var(--space-2);
}
.profile-header h1 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.profile-bio {
	color: var(--ink-soft);
	max-width: 68ch;
	line-height: 1.6;
}
.profile-meta { color: var(--ink-soft); font-size: var(--text-sm); }
.profile-stats { display: flex; gap: var(--space-6); margin-top: var(--space-3); font-size: var(--text-sm); }
.profile-stats b { font-family: var(--font-data); font-size: var(--text-base); display: block; }

hr.divider { border: none; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--line);
	padding: var(--space-7) 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}
.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}
/* The wordmark's default colour belongs to the shelf; on paper it inverts. */
.footer-logo { font-size: var(--text-base); color: var(--ink); }
.footer-logo span { color: var(--ink-2); }
.footer-tag { color: var(--ink-soft); }

/* ---------- Misc ---------- */
.skeleton {
	background: linear-gradient(90deg, var(--cream-dark) 25%, #fff 37%, var(--cream-dark) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.4s ease infinite;
	border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Modal ---------- */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27, 23, 18, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	padding: var(--space-5);
}
.modal-box {
	background: var(--card);
	border-radius: var(--radius);
	padding: var(--space-7);
	max-width: 420px;
	width: 100%;
	box-shadow: var(--shadow-lift);
}
.modal-box h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.modal-box p.sub { color: var(--ink-soft); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.modal-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.modal-close-x {
	float: right;
	cursor: pointer;
	color: var(--ink-soft);
	font-size: var(--text-lg);
	line-height: 1;
}

/* ---------- Avatar cropper ---------- */
.crop-viewport {
	width: 260px;
	height: 260px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	background: var(--cream-dark);
	cursor: grab;
	touch-action: none;
	border: 1px solid var(--line);
}
.crop-viewport img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Messages ---------- */
.messages-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-5);
	height: 640px;
	max-height: calc(100vh - 220px);
}

.conversation-list {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow-y: auto;
}

.conversation-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--line);
}
.conversation-row:hover { background: var(--cream-dark); }
.conversation-row.active { background: var(--cream-dark); }
.conversation-row:last-child { border-bottom: none; }

.conversation-name { font-weight: 600; font-size: var(--text-sm); }
.conversation-sub { font-size: var(--text-micro); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread-pane {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.thread-header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}

.thread-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.thread-bubble-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 75%; }
.thread-bubble-row.mine { align-self: flex-end; align-items: flex-end; }
.thread-bubble {
	background: var(--cream-dark);
	padding: var(--space-2) var(--space-4);
	border-radius: 14px;
	font-size: var(--text-sm);
	white-space: pre-wrap;
	word-break: break-word;
}
.thread-bubble-row.mine .thread-bubble { background: var(--ink); color: var(--cream); }
.thread-time { font-size: var(--text-micro); color: var(--ink-soft); margin-top: var(--space-1); }

.thread-composer {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4);
	border-top: 1px solid var(--line);
	flex-shrink: 0;
}
.thread-composer input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--text-sm);
}

/* ---------- Offers page ---------- */
.offer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
	background: var(--card);
}
.offer-row .offer-amount { font-family: var(--font-data); font-size: var(--text-lg); font-weight: 500; }
.offer-row .offer-meta { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-1); }
.offer-row .offer-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.offer-status { font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-tag); }
.offer-status.pending { background: var(--cream-dark); color: var(--ink-soft); }
.offer-status.accepted { background: #e9f5ec; color: var(--success); }
.offer-status.declined { background: #fbe9e7; color: var(--danger); }
.offer-status.paid { background: var(--cream-dark); color: var(--ink-soft); }
.offer-status.shipped { background: var(--cream-dark); color: var(--ink); }
.offer-status.refunded,
.offer-status.refund_requested { background: #fbe9e7; color: var(--danger); }
.offer-status.delivered { background: #e9f5ec; color: var(--success); }

/* ---------- Payout + order state ----------
   A dot rather than a coloured pill: these lines are sentences, and the state
   is carried by the sentence. The dot is a marker beside it, never the message,
   so the meaning survives for anyone who can't separate the two hues. */
.payout-state {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	font-weight: 600;
}
.payout-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ink-soft);
}
.payout-state.is-ready .payout-dot { background: var(--success); }
.payout-state.is-pending .payout-dot { background: var(--rule-strong); }

.order-address {
	font-family: var(--font-data);
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--ink-2);
	margin: var(--space-3) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--rule);
	white-space: pre-line;
}
.order-ship-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--rule);
}
.order-ship-form input { flex: 1 1 160px; min-width: 0; }
.order-tabs {
	display: flex;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--rule);
}
.order-tabs button {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 var(--space-3);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: var(--ink-2);
	cursor: pointer;
}
.order-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* ---------- Auction ---------- */
.auction-panel {
	background: var(--cream-dark);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
}
.auction-badge {
	display: inline-block;
	background: var(--ink);
	color: var(--cream);
	font-size: var(--text-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-tag);
	margin-bottom: var(--space-3);
}
.auction-current { font-family: var(--font-data); font-size: var(--text-lg); font-weight: 500; }
.auction-sub { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--space-1) 0 var(--space-4); }
.bid-row { display: flex; gap: var(--space-3); }
.bid-row input {
	flex: 1;
	padding: var(--space-3) var(--space-3);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--text-sm);
}
.bid-history { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-soft); }
.bid-history-row { display: flex; justify-content: space-between; padding: var(--space-1) 0; }

/* ---------- Responsive ----------
   Structural reflow rather than shrinking: the hero stacks image-first, the
   organ index steps down in columns, and the filter panel collapses. */

/* Laptop */
@media (max-width: 1180px) {
	.hero-title { font-size: clamp(2.4rem, 5vw, 3.6rem); }
	.organ-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); }
	.browse-layout { grid-template-columns: 200px 1fr; gap: var(--space-8); }
}

/* Tablet */
@media (max-width: 900px) {
	.hero {
		min-height: 590px;
		padding: var(--space-12) 0;
		background-position: 62% center;
		background-image:
			linear-gradient(90deg, rgba(10, 11, 12, 0.72) 0%, rgba(10, 11, 12, 0.5) 52%, rgba(10, 11, 12, 0.08) 100%),
			url('../images/hero-spray-wide.png');
	}
	.hero-copy { max-width: 520px; }
	.hero-title { font-size: clamp(2.2rem, 7vw, 3.2rem); }

	.browse-layout { grid-template-columns: 1fr; }
	.filters { position: static; border-top: none; }
	.filters-toggle { display: inline-flex; }
	.filters { display: none; }
	.filters.is-open { display: block; border-top: 1px solid var(--ink); }

	.listing-detail { grid-template-columns: 1fr; gap: var(--space-7); }
	.form-grid-2 { grid-template-columns: 1fr; }
	.messages-layout { grid-template-columns: 1fr; height: auto; }
	.conversation-list { max-height: 220px; }
	.thread-pane { height: 480px; }
	.sell-strip-inner { flex-direction: column; align-items: flex-start; }
}

/* Mobile */
@media (max-width: 640px) {
	.site-header .header-main {
		flex-wrap: wrap;
		height: auto;
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
		row-gap: var(--space-3);
	}
	.logo { order: 1; }
	.header-actions { order: 2; margin-left: auto; }
	/* Search takes its own full-width row; the taxonomy strip below the header
	   still carries browse, so nothing is stranded. */
	.header-search { order: 3; flex-basis: 100%; max-width: none; }
	.header-actions .btn-sm { padding: var(--space-2) var(--space-3); }
	.label-full { display: none; }
	.label-short { display: inline; }

	.hero {
		min-height: 540px;
		background-position: 66% center;
		background-image:
			linear-gradient(90deg, rgba(10, 11, 12, 0.88) 0%, rgba(10, 11, 12, 0.66) 58%, rgba(10, 11, 12, 0.2) 100%),
			url('../images/hero-spray-wide.png');
	}
	.hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
	.hero-actions { width: 100%; }
	.hero-actions .btn { flex: 1; }
	.organ-index { grid-template-columns: 1fr; }
	.recent-section { padding: var(--space-14) 0 var(--space-12); }
	.organ, .sell-strip { padding: var(--space-12) 0; }
	.listing-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-7) var(--space-4); }
	.section-head { margin-bottom: var(--space-6); }
	.ledger-strip-inner { flex-direction: column; gap: var(--space-2); }
	.ledger-dot { display: none; }
	.footer-inner { flex-direction: column; text-align: center; gap: var(--space-3); }
}

/* ---------- Reduced motion ---------- */
/* motion.js already skips GSAP work when this is set; this covers the
   CSS-driven movement it can't reach. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.btn:hover,
	.btn:active,
	.listing-card:hover,
	.listing-card:hover .thumb img { transform: none; }
}