/* ─── BriarBid — Cream Luxury Redesign v8 ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--bg: #f0e6d3;
--surface: #ffffff;
--surface2: #f5f0e8;
--surface3: #ede4d4;
--border: rgba(140,105,50,0.15);
--border2: rgba(140,105,50,0.28);
--gold: #b8891e;
--gold-light: #d4a843;
--gold-dark: #8a6415;
--cta: #7a2231;
--cta-dark: #5c1a25;
--cta-light: #9c3347;
--text: #1c1510;
--text-muted: rgba(28,21,16,0.55);
--text-dim: rgba(28,21,16,0.72);
--red: #c53030;
--green: #2a7a48;
--nav-h: 116px;
}

html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { overflow-x: hidden; }

body {
background:
linear-gradient(rgba(10,7,4,0.00), rgba(10,7,4,0.00)),
url('bg-wood.webp') center center / cover fixed;
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 17px;
line-height: 1.65;
min-height: 100vh;
display: flex;
flex-direction: column;
}

a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-light); }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.25); border-radius: 3px; }

/* ─── Typography ────────────────────────────────────────────────────────── */
.serif { font-family: 'Playfair Display', serif; }

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

/* ─── Divider ───────────────────────────────────────────────────────────── */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--border2), transparent);
margin: 36px 0;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn-gold {
display: inline-block;
padding: 11px 26px;
background: var(--gold);
color: #0a0800;
border: none;
border-radius: 2px;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.09em;
text-transform: uppercase;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
box-shadow: 0 2px 12px rgba(201,168,76,0.18);
}
.btn-gold:hover {
background: var(--gold-light);
color: #0a0800;
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(201,168,76,0.28);
}
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
display: inline-block;
padding: 10px 24px;
background: transparent;
color: var(--text-muted);
border: 1px solid rgba(201,168,76,0.28);
border-radius: 2px;
font-weight: 500;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-ghost:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(201,168,76,0.05);
}

.btn-outline-gold {
display: inline-block;
padding: 10px 22px;
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
border-radius: 2px;
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-outline-gold:hover {
background: var(--gold);
color: #0a0800;
box-shadow: 0 4px 16px rgba(201,168,76,0.22);
}

.btn-lg { padding: 14px 36px; font-size: 0.88rem; }
.btn-sm { padding: 7px 16px; font-size: 0.78rem; }

/* ─── Nav ───────────────────────────────────────────────────────────────── */
#nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(8, 6, 4, 0.98);
backdrop-filter: blur(28px) saturate(180%);
border-bottom: 1px solid rgba(201,168,76,0.14);
height: var(--nav-h);
/* Thin gold rule at very top */
box-shadow: inset 0 2px 0 rgba(201,168,76,0.22), 0 1px 40px rgba(0,0,0,0.5);
}

.nav-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
height: 100%;
display: flex;
align-items: center;
gap: 0;
}

.brand {
flex-shrink: 0;
transition: opacity 0.22s;
text-decoration: none;
margin-right: auto;
}
.brand:hover { opacity: 0.78; }
.brand-wordmark {
font-family: 'Playfair Display', serif;
font-size: 1.72rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text);
display: flex;
align-items: baseline;
gap: 0;
}
.brand-accent {
color: var(--gold);
font-style: italic;
letter-spacing: 0.02em;
}

/* Nav is always dark — keep brand text light */
#nav .brand-wordmark { color: rgba(240,232,213,0.92); }
#nav .brand-accent { color: var(--gold-light); }

.nav-center {
display: flex;
gap: 4px;
align-items: center;
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

/* Plain text nav with a thin vertical divider between items, replacing
the old tan/gold pill-button treatment -- the dark brown text on a
tan-gradient pill (a "skin" tone, per Matt) had low contrast and was
hard to read, and this also matches the plain-text-with-dividers style
now used on the main site's own nav (.nav-links a in styles2.css).
.nav-center holds these as plain sibling <a> tags in one scrollable row
(no <li> wrapper), so the divider is a left border added via the
adjacent-sibling selector on every link but the first. */
.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(240,232,213,0.85);
font-size: 0.94rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 12px;
position: relative;
transition: color 0.2s ease;
white-space: nowrap;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
text-decoration: none;
}
.nav-link + .nav-link {
border-left: 1px solid rgba(201,168,76,0.55);
}
.nav-link:hover {
color: #ffffff;
background: none;
box-shadow: none;
transform: none;
}
.nav-link.active {
color: var(--gold);
background: none;
box-shadow: none;
transform: none;
}

.nav-right {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
padding-left: 28px;
}

/* Override in dark nav — ghost becomes a refined outlined link */
#nav .btn-ghost {
color: rgba(240,232,213,0.5);
border-color: rgba(201,168,76,0.22);
font-size: 0.88rem;
letter-spacing: 0.1em;
padding: 10px 22px;
border-radius: 2px;
}
#nav .btn-ghost:hover { color: var(--gold-light); border-color: rgba(201,168,76,0.55); }

/* Gold CTA — refined, not too heavy */
#nav .btn-gold {
font-size: 0.88rem;
letter-spacing: 0.1em;
padding: 10px 24px;
border-radius: 2px;
}

.hero .btn-ghost {
color: rgba(255,255,255,0.75);
border-color: rgba(255,255,255,0.28);
}
.hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.nav-user {
display: flex;
align-items: center;
gap: 12px;
color: rgba(240,232,213,0.4);
font-size: 0.88rem;
letter-spacing: 0.08em;
}

.nav-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(184,137,30,0.15);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.72rem;
color: var(--gold-light);
cursor: pointer;
border: 1px solid rgba(201,168,76,0.3);
transition: border-color 0.2s, background 0.2s;
letter-spacing: 0;
overflow: hidden;
flex-shrink: 0;
}
.nav-avatar-lg {
width: 50px;
height: 50px;
font-size: 0.8rem;
border: 2px solid rgba(201,168,76,0.5);
margin: 2px 0;
}
.nav-avatar:hover { border-color: var(--gold-light); background: rgba(184,137,30,0.22); }
.nav-avatar-lg:hover { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(201,168,76,0.15); }

/* Dashboard profile-page nav slot (Hi, Name removed -- larger avatar takes its place) */
.nav-user-greet { gap: 14px; }
.nav-user-greet .nav-avatar-lg { width: 84px; height: 84px; font-size: 1.6rem; }


.hamburger {
/* Always visible now (not just at the 720px mobile breakpoint below),
matching the same change on the main site's own nav (styles2.css) --
one consistent "full site menu" affordance on every page. */
display: block;
background: none;
border: none;
color: rgba(240,232,213,0.7);
font-size: 1.4rem;
margin-left: auto;
padding: 4px 8px;
}

.mobile-menu {
background: rgba(10, 9, 7, 0.98);
border-top: 1px solid rgba(201,168,76,0.1);
border-left: 1px solid rgba(201,168,76,0.1);
padding: 16px 24px 20px;
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
top: var(--nav-h);
right: 0;
left: auto;
width: max-content;
min-width: 180px;
max-width: calc(100vw - 24px);
border-radius: 0 0 0 10px;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.mobile-menu a {
color: rgba(240,232,213,0.75);
padding: 12px 0;
border-bottom: 1px solid rgba(201,168,76,0.08);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.mobile-menu a:last-child { border-bottom: none; }

.hidden { display: none !important; }

/* ─── Layout ────────────────────────────────────────────────────────────── */
#app {
flex: 1;
padding-top: var(--nav-h);
}

.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  background: #6b6660;
padding: 36px 32px 26px;
text-align: center;
border-bottom: 1px solid rgba(201,168,76,0.1);
position: relative;
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.68rem;
font-weight: 600;
  color: rgba(255,255,255,0.85);
margin-bottom: 12px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
display: block;
width: 32px;
height: 1px;
  background: rgba(255,255,255,0.4);
opacity: 0.5;
}

.hero h1 {
color: #ffffff;
margin-bottom: 12px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
font-size: clamp(2rem, 4vw, 3.1rem);
letter-spacing: -0.01em;
text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

.hero h1 span { color: #ffffff; }

.hero p {
color: rgba(255,255,255,0.68);
font-size: 0.95rem;
max-width: 480px;
margin: 0 auto 20px;
line-height: 1.6;
}

.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}

.hero-stats {
display: flex;
justify-content: center;
gap: 0;
margin-top: 72px;
padding-top: 48px;
border-top: 1px solid rgba(255,255,255,0.1);
flex-wrap: wrap;
}

.hero-stat {
text-align: center;
padding: 0 48px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-stat:last-child { border-right: none; }
.hero-stat .num {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 700;
color: var(--gold);
display: block;
line-height: 1;
margin-bottom: 8px;
}
.hero-stat .label {
font-size: 0.65rem;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
}

/* ─── Section Label ─────────────────────────────────────────────────────── */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.section-eyebrow::after {
content: '';
display: block;
width: 24px;
height: 1px;
background: var(--gold);
opacity: 0.5;
}

/* ─── Browse Section ────────────────────────────────────────────────────── */
.browse-section {
padding: 48px 0 80px;
}

.browse-section > .container {
background: rgba(250, 247, 240, 0.97);
border-radius: 12px;
padding: 36px 40px 48px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}

/* Text inside browse panel — dark text on light gray */
.browse-section > .container .browse-header h2,
.browse-section > .container h2 {
color: var(--text);
}
.browse-section > .container .browse-header {
border-bottom-color: rgba(0,0,0,0.12);
}
.browse-section > .container .pill {
border-color: rgba(0,0,0,0.22);
color: var(--text-dim);
}
.browse-section > .container .pill:hover {
border-color: var(--gold-dark);
color: var(--gold-dark);
background: rgba(201,168,76,0.08);
}

/* Watch button on light listing detail box */
.listing-detail .btn-ghost {
color: rgba(30,15,0,0.75);
border-color: rgba(30,15,0,0.25);
}
.listing-detail .btn-ghost:hover {
color: var(--gold-dark);
border-color: var(--gold);
background: rgba(201,168,76,0.1);
}

.browse-header .btn-outline-gold {
background: #c0392b;
color: #fff;
border-color: #922b21;
}
.browse-header .btn-outline-gold:hover {
background: #d64535;
border-color: #a83a2a;
}

.browse-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 36px;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
padding-bottom: 20px;
}

.browse-header h2 {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2rem);
}

/* ─── Search ────────────────────────────────────────────────────────────── */
.search-bar {
display: flex;
gap: 8px;
margin-bottom: 24px;
}

.search-input {
flex: 1;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 2px;
padding: 11px 18px;
color: var(--text);
font-size: 0.9rem;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}

.search-btn {
padding: 11px 22px;
background: var(--surface3);
border: 1px solid var(--border2);
border-radius: 2px;
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.search-btn:hover {
color: var(--gold);
border-color: var(--gold);
background: rgba(201,168,76,0.04);
}

/* ─── Category Pills ────────────────────────────────────────────────────── */
.cat-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 36px;
}

.pill {
padding: 10px 24px;
border-radius: 2px;
background: transparent;
border: 1px solid var(--border2);
color: var(--text-dim);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.pill:hover {
border-color: #c0392b;
color: #c0392b;
background: rgba(192,57,43,0.06);
}
.pill.active {
background: #c0392b;
border-color: #922b21;
color: #fff;
}
.browse-pagination .btn-ghost {
color: var(--text);
border-color: rgba(184,137,30,0.55);
font-weight: 700;
}
.browse-pagination .btn-ghost:hover {
background: var(--gold);
border-color: var(--gold);
color: #0a0800;
}

/* ─── Listing Grid ──────────────────────────────────────────────────────── */
.listing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.listing-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
border-color 0.3s;
cursor: pointer;
box-shadow: 0 2px 16px rgba(100,70,20,0.12), 0 1px 4px rgba(100,70,20,0.08);
}
.listing-card:hover {
border-color: rgba(201,168,76,0.35);
transform: translateY(-8px);
box-shadow:
0 24px 64px rgba(0,0,0,0.5),
0 0 0 1px rgba(201,168,76,0.12),
0 8px 24px rgba(201,168,76,0.05);
}

.card-image {
height: 220px;
background: linear-gradient(145deg, #201c17 0%, #141210 60%, #1a1713 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card-image::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(10,8,6,0.55));
pointer-events: none;
}

.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.listing-card:hover .card-image img { transform: scale(1.04); }

.card-image-placeholder {
font-size: 4rem;
position: relative;
z-index: 1;
opacity: 0.4;
filter: grayscale(0.4);
}

.card-badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(8,6,4,0.88);
backdrop-filter: blur(10px);
border: 1px solid rgba(201,168,76,0.3);
color: var(--gold);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 4px 10px;
border-radius: 2px;
z-index: 2;
}

.card-timer {
position: absolute;
top: 14px;
right: 14px;
background: rgba(8,6,4,0.86);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(240,232,213,0.85);
font-size: 0.8rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 3px;
font-variant-numeric: tabular-nums;
z-index: 2;
letter-spacing: 0.03em;
}
@media (max-width: 640px) {
.card-timer {
font-size: 0.92rem;
padding: 7px 13px;
top: 10px;
right: 10px;
}
}
.card-timer.urgent { color: #1a1a1a; border-color: rgba(231,76,60,0.4); }
.card-timer.ending { color: #1a1a1a; border-color: rgba(245,166,35,0.35); }

.card-body { padding: 22px 22px 20px; }

.card-title {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.card-seller {
font-size: 0.82rem;
color: var(--text-dim);
margin-bottom: 18px;
letter-spacing: 0.02em;
}

.card-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--border);
}

.card-bid-label {
font-size: 0.69rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
font-weight: 600;
margin-bottom: 3px;
}
.card-bid-amount {
font-family: 'Playfair Display', serif;
font-size: 1.65rem;
font-weight: 700;
color: var(--gold-dark);
line-height: 1;
}
.card-bid-count {
font-size: 0.76rem;
color: var(--text-dim);
margin-top: 5px;
letter-spacing: 0.02em;
}

.card-btn {
padding: 9px 18px;
background: var(--cta);
border: 1px solid var(--cta);
border-radius: 2px;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.card-btn:hover {
background: var(--cta-dark);
border-color: var(--cta-dark);
color: #fff;
}

/* ─── Watch Button ──────────────────────────────────────────────────────── */
.card-watch {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(8,6,4,0.75);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: rgba(240,232,213,0.4);
cursor: pointer;
transition: all 0.2s;
line-height: 1;
padding: 0;
z-index: 2;
}
.card-watch:hover { border-color: #e74c3c; color: #e74c3c; }
.card-watch.watched { color: #e74c3c; border-color: rgba(231,76,60,0.5); background: rgba(231,76,60,0.12); }

/* ─── Listing Detail ────────────────────────────────────────────────────── */
.listing-detail {
padding: 48px 0 96px;
}

.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(20,10,0,0.85);
background: rgba(242,238,228,0.92);
border: 1px solid rgba(0,0,0,0.12);
border-radius: 20px;
padding: 6px 14px 6px 10px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 32px;
box-shadow: 0 1px 6px rgba(0,0,0,0.14);
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.back-link:hover { color: #7a4e00; background: rgba(255,248,228,0.98); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }

.detail-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 48px;
align-items: start;
}

.detail-left { min-width: 0; }
.detail-right { min-width: 0; }

.detail-image {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 3px;
min-height: 200px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
opacity: 0.4;
overflow: hidden;
}

/* Override inside detail-left */
.detail-left .detail-image {
opacity: 1;
min-height: 200px;
height: auto;
}

.detail-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 700;
color: #1a0e00;
margin-bottom: 20px;
line-height: 1.2;
letter-spacing: -0.01em;
text-shadow: none;
}

.detail-meta {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 28px;
flex-wrap: wrap;
}

.meta-tag {
padding: 5px 14px;
background: rgba(8,6,4,0.88);
border: 1px solid rgba(201,168,76,0.3);
border-radius: 2px;
font-size: 0.78rem;
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.12em;
}

.detail-description {
color: var(--text);
font-size: 1.14rem;
line-height: 1.8;
margin-bottom: 32px;
padding: 28px 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

.detail-description-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
}

.detail-info h1 {
font-size: 1.7rem;
margin-bottom: 8px;
color: var(--text);
}

/* ─── Bid Panel ─────────────────────────────────────────────────────────── */
.bid-panel {
background: #f0f0f0;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 10px;
padding: 32px;
position: sticky;
top: calc(var(--nav-h) + 24px);
box-shadow: 0 6px 32px rgba(0,0,0,0.10);
}

.bid-current {
text-align: center;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0,0,0,0.1);
margin-bottom: 20px;
}

.bid-current-label {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #2a2a2a;
font-weight: 700;
margin-bottom: 8px;
}

.bid-current-amount {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: var(--gold-dark);
line-height: 1;
letter-spacing: -0.01em;
}

.bid-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
color: #444444;
margin-bottom: 12px;
padding: 5px 0;
}
.bid-detail-row span:last-child { color: #111111; font-weight: 700; }

.bid-timer-large {
text-align: center;
padding: 24px 16px 20px;
background: rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.12);
border-radius: 6px;
margin: 20px 0;
}
.bid-timer-large .label {
font-size: 0.72rem;
color: #4a3e2e;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
margin-bottom: 12px;
}
.bid-timer-large .time {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
color: #1a1a1a;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 16px;
}
.bid-timer-large .time.urgent { color: #1a1a1a; }
.bid-timer-large .time.ending { color: #1a1a1a; }
.bid-timer-large .end-local {
font-size: 0.8rem;
color: #5a4e3e;
font-weight: 600;
margin-top: 4px;
}

.bid-input-row {
display: flex;
gap: 0;
margin-bottom: 12px;
}

.bid-currency {
padding: 14px 12px 14px 16px;
background: #fff;
border: 1px solid rgba(0,0,0,0.18);
border-right: none;
border-radius: 4px 0 0 4px;
color: #6a5a40;
font-size: 1rem;
font-weight: 600;
}

.bid-input {
flex: 1;
background: #fff;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 0 4px 4px 0;
padding: 14px 16px;
color: #1a1208;
font-size: 1.4rem;
font-family: inherit;
font-weight: 600;
transition: border-color 0.2s, box-shadow 0.2s;
}
.bid-input:focus {
outline: none;
border-color: var(--gold-dark);
box-shadow: 0 0 0 3px rgba(160,120,32,0.15);
}
.bid-input-row .bid-input { border-radius: 0 4px 4px 0; }

.bid-submit {
width: 100%;
padding: 16px;
background: var(--cta-dark);
border: none;
border-radius: 4px;
color: #fff;
font-size: 0.88rem;
font-weight: 800;
font-family: inherit;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
margin-bottom: 12px;
box-shadow: 0 4px 16px rgba(122,34,49,0.28);
}
.bid-submit:hover {
background: var(--cta);
box-shadow: 0 6px 24px rgba(122,34,49,0.4);
transform: translateY(-1px);
}

.bid-note {
font-size: 1.1rem;
color: #6a5a40;
text-align: center;
line-height: 1.5;
}

.bid-history { margin-top: 32px; }
.bid-history h3 {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(0,0,0,0.4);
font-weight: 700;
margin-bottom: 14px;
font-family: 'Inter', sans-serif;
}

.bid-history-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-size: 0.82rem;
}
.bid-history-row .bidder { color: #4a3e2e; }
.bid-history-row .amount { color: var(--gold-dark); font-weight: 600; }
.bid-history-row .time { color: rgba(0,0,0,0.35); font-size: 0.72rem; }

/* ─── Auth Forms ────────────────────────────────────────────────────────── */
.auth-page {
padding: 80px 24px 100px;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: calc(100vh - var(--nav-h));
background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.04) 0%, transparent 60%);
}

.auth-card {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 3px;
padding: 48px;
width: 100%;
max-width: 440px;
box-shadow: 0 16px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.04);
}

.auth-card h2 {
margin-bottom: 6px;
font-size: 1.9rem;
letter-spacing: -0.01em;
}

.auth-sub {
color: var(--text-dim);
font-size: 0.88rem;
margin-bottom: 32px;
line-height: 1.6;
}

/* ─── Form Groups ───────────────────────────────────────────────────────── */
.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-size: 0.68rem;
font-weight: 700;
color: var(--text-dim);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.12em;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 2px;
padding: 12px 16px;
color: var(--text);
font-size: 0.92rem;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}
.form-group input::placeholder { color: var(--text-dim); }
.form-group select { cursor: pointer; }
.form-group select option { background: var(--surface2); color: var(--text); }
.form-group textarea { resize: vertical; min-height: 110px; }
.sell-page .form-group input,
.sell-page .form-group select,
.sell-page .form-group textarea {
border: 1.5px solid #000;
}
label:has(+ #sell-start-date),
label:has(+ #sell-start-time) {
min-height: 40px;
}
.two-col > .form-group {
min-width: 0;
}
#sell-start-date,
#sell-start-time {
width: 1px;
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.two-col {
min-width: 0;
}

.form-submit {
width: 100%;
padding: 15px;
background: var(--cta);
border: none;
border-radius: 2px;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
font-family: inherit;
cursor: pointer;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
margin-top: 8px;
box-shadow: 0 4px 16px rgba(122,34,49,0.35);
}
.form-submit:hover {
background: var(--cta-dark);
box-shadow: 0 6px 24px rgba(122,34,49,0.45);
transform: translateY(-1px);
}

.auth-switch {
text-align: center;
margin-top: 24px;
font-size: 0.82rem;
color: var(--text-dim);
}

.form-error {
background: rgba(197,48,48,0.08);
border: 1px solid rgba(197,48,48,0.3);
color: #a82020;
border-radius: 2px;
padding: 12px 16px;
font-size: 0.85rem;
margin-bottom: 20px;
line-height: 1.5;
}

/* ─── Dashboard ─────────────────────────────────────────────────────────── */
.dashboard-page {
padding: 48px 0 96px;
}

.page-title {
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.page-subtitle {
color: var(--text-dim);
font-size: 1rem;
margin-bottom: 44px;
letter-spacing: 0.02em;
}

.stats-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 48px;
}

.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.stat-card:hover {
transform: translateY(-3px);
border-color: var(--border2);
box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.stat-card:hover::before { opacity: 1; }

.stat-card .stat-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-dim);
font-weight: 700;
margin-bottom: 10px;
}

.stat-card .stat-value {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--gold);
line-height: 1;
}

.section-title {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
font-weight: 700;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
font-family: 'Inter', sans-serif;
}

.dash-tabs {
display: flex;
gap: 0;
margin-bottom: 32px;
border-bottom: 1px solid rgba(0,0,0,0.14);
}

.dash-tab {
padding: 12px 24px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-dim);
font-size: 0.85rem;
font-family: inherit;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: -1px;
transition: color 0.2s, border-color 0.2s;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.active {
color: var(--gold-dark);
border-bottom-color: var(--gold);
}

/* ─── Dashboard Items ───────────────────────────────────────────────────── */
.dash-item {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.dash-item:hover {
border-color: rgba(201,168,76,0.3);
transform: translateX(4px);
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.dash-item-emoji {
font-size: 1.6rem;
width: 46px;
height: 46px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.dash-item-info { flex: 1; min-width: 0; }
.dash-item-title {
font-weight: 600;
color: var(--text);
font-size: 0.92rem;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-item-sub {
font-size: 0.75rem;
color: var(--text-dim);
letter-spacing: 0.02em;
}

.dash-item-right { text-align: right; flex-shrink: 0; }

.dash-status {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 2px;
margin-top: 5px;
}
.dash-status.winning { background: rgba(42,122,72,0.18); color: #4ade80; border: 1px solid rgba(42,122,72,0.25); }
.dash-status.outbid { background: rgba(197,48,48,0.12); color: #f87171; border: 1px solid rgba(197,48,48,0.2); }

/* ─── Sell Form ─────────────────────────────────────────────────────────── */
.sell-page {
padding: 48px 0 96px;
max-width: 660px;
}

/* ─── Upload Zone ───────────────────────────────────────────────────────── */
.upload-zone {
background: var(--surface2);
border: 2px dashed var(--border2);
border-radius: 3px;
padding: 36px 20px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.upload-zone:hover {
border-color: var(--gold);
background: rgba(201,168,76,0.03);
}

/* ─── Admin ─────────────────────────────────────────────────────────────── */
.admin-page {
padding: 48px 0 96px;
}

.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}

.admin-table th {
text-align: left;
padding: 12px 16px;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
font-weight: 700;
border-bottom: 1px solid var(--border2);
background: var(--surface2);
}

.admin-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
vertical-align: middle;
}

.admin-table tr:hover td { background: rgba(201,168,76,0.02); }

.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 2px;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.badge-active { background: rgba(42,122,72,0.15); color: #4ade80; border: 1px solid rgba(42,122,72,0.2); }
.badge-ended { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid var(--border); }
.badge-pending { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.2); }

/* ─── Static Pages ──────────────────────────────────────────────────────── */
.static-page {
padding: 72px 0 96px;
max-width: 780px;
}

.static-page h1 { margin-bottom: 20px; }
.static-page p {
color: var(--text-muted);
margin-bottom: 18px;
line-height: 1.85;
font-size: 0.95rem;
}
/* Static pages inside mob-panel (cream background) need dark text */
.mob-panel { color: #1a0e04; }
.mob-panel h1, .mob-panel h2, .mob-panel h3 { color: #0e0700; border-color: rgba(0,0,0,0.12); }
.mob-panel p { color: #2a1a0a !important; }
.mob-panel strong { color: #0e0700; }

.static-page h2 {
font-size: 1.25rem;
margin: 40px 0 14px;
color: var(--text);
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

/* ─── 404 ───────────────────────────────────────────────────────────────── */
.not-found {
text-align: center;
padding: 120px 24px;
}
.not-found h1 {
font-size: 6rem;
color: rgba(201,168,76,0.15);
margin-bottom: 16px;
letter-spacing: -0.04em;
}
.not-found p { color: var(--text-dim); margin-bottom: 32px; font-size: 1.05rem; }

/* ─── Toast ─────────────────────────────────────────────────────────────── */
.toast {
position: fixed;
bottom: 32px;
right: 32px;
background: #1a1410;
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
padding: 14px 22px;
border-radius: 3px;
font-size: 0.88rem;
font-weight: 500;
z-index: 9999;
animation: slideUp 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
max-width: 340px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.toast.success {
border-color: #2a7a48;
color: #fff;
background: #1f6b3a;
}
.toast.error {
border-color: #c53030;
color: #fff;
background: #7a2020;
}

@keyframes slideUp {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* ─── Empty State ───────────────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 72px 24px;
color: var(--text-dim);
}
.empty-state .icon {
font-size: 2.5rem;
margin-bottom: 20px;
opacity: 0.3;
display: block;
}
.empty-state p {
margin-bottom: 24px;
font-size: 0.95rem;
line-height: 1.6;
}

/* ─── Admin Reports ─────────────────────────────────────────────────────── */
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 40px;
}

.report-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.report-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
font-weight: 700;
margin-bottom: 10px;
}
.report-value {
font-family: 'Playfair Display', serif;
font-size: 2.1rem;
font-weight: 700;
color: var(--gold);
line-height: 1;
margin-bottom: 6px;
}
.report-sub { font-size: 0.75rem; color: var(--text-dim); }

/* ─── Footer ────────────────────────────────────────────────────────────── */
footer {
background: var(--surface);
border-top: 1px solid var(--border);
margin-top: auto;
}

.footer-inner {
max-width: 1240px;
margin: 0 auto;
padding: 10px 32px 4px;
display: flex;
flex-direction: column;
gap: 6px;
}

.footer-brand {
min-width: 220px;
}

.brand-text {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--gold);
display: block;
margin-bottom: 14px;
letter-spacing: 0.02em;
}

.footer-brand p {
color: var(--text-dim);
font-size: 0.85rem;
max-width: 420px;
line-height: 1.7;
white-space: nowrap;
}

.footer-links {
display: flex;
gap: 40px;
flex-wrap: wrap;
}

.footer-links > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 18px;
min-width: 130px;
}

.footer-links h4 {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
font-family: 'Inter', sans-serif;
font-weight: 700;
margin-bottom: 2px;
flex-basis: 100%;
}

.footer-links a {
color: rgba(28,21,16,0.45);
font-size: 0.85rem;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }

.footer-bottom {
border-top: 1px solid var(--border);
padding: 4px 32px;
max-width: 1240px;
margin: 0 auto;
text-align: center;
color: var(--text-dim);
font-size: 0.7rem;
letter-spacing: 0.04em;
width: 100%;
}

footer .footer-bottom { max-width: none; }

/* ─── Decorative Gold Rule ──────────────────────────────────────────────── */
.gold-rule {
display: block;
width: 40px;
height: 2px;
background: var(--gold);
margin: 16px auto;
opacity: 0.6;
}

/* ─── Mobile utility classes ─────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
.detail-grid { grid-template-columns: 1fr; }
.bid-panel { position: static; }
}

@media (max-width: 720px) {
.nav-center { display: none; }
  .nav-inner .nav-right { display: flex !important; grid-column: 1 / -1 !important; grid-row: 2 !important; justify-content: flex-end !important; margin-left: 0 !important; padding: 6px 0 0 0 !important; gap: 8px !important; border-top: 1px solid rgba(201,168,76,0.15); margin-top: 4px; }
  .nav-right .btn-ghost, .nav-right .btn-gold { padding: 8px 16px !important; font-size: 0.78rem !important; min-height: 36px !important; white-space: nowrap; }
.hamburger { display: block; }
.nav-inner { gap: 0; }
.brand { margin-left: 0; }

.hero { padding: 44px 20px 30px; }
.hero-stats { gap: 0; }
.hero-stat { padding: 0 24px; }

.listing-grid { grid-template-columns: 1fr 1fr; }

.footer-inner { flex-direction: column; gap: 48px; }
.footer-links { gap: 40px; }

.container { padding: 0 20px; }
.auth-card { padding: 32px 24px; }
}

@media (max-width: 600px) {
/* Collapse two-column grids to single column (CSS class and inline-style variants) */
.two-col { grid-template-columns: 1fr !important; }
div[style*="display:grid"] { grid-template-columns: 1fr !important; }

/* Collapse 4-col photo grid to 2-col (CSS class and inline-style variants) */
.photo-grid { grid-template-columns: 1fr 1fr !important; }
#photo-preview-grid,
div[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }

/* Reduce form panel padding */
.mob-panel { padding: 20px 16px 24px !important; }
div[style*="padding:40px 48px"] { padding: 20px 16px 24px !important; }

/* Remove min-width constraints in reports */
.min-w-none { min-width: 0 !important; }

/* Allow report rows to wrap on very small screens */
.report-row { flex-wrap: wrap; gap: 8px !important; }

/* Sell-page container breathing room */
.sell-page { padding: 0 !important; }
}

@media (max-width: 500px) {
.listing-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: 1fr 1fr; }
.dash-tab { padding: 10px 14px; font-size: 0.65rem; }
.hero-stat { padding: 0 16px; }
.hero-stat .num { font-size: 1.8rem; }
}

/* ---- Nav overlap fix (added): .nav-center was absolutely centered on
.nav-inner, independent of the actions group's real width. On widths
between the 720px mobile breakpoint and ~1360px (where .nav-inner
hits its max-width), the actions group (cart/login/join or
cart/avatar/logout) could slide left into the centered nav links and
overlap them -- worse in the logged-out state since "Login" + "Join
Free" are wider than the logged-in avatar+logout. Switching
.nav-center to a flexible flex item (instead of position:absolute)
makes the browser share space correctly, so it can never overlap its
siblings again at any width down to 720px. */
.nav-inner .brand { margin-right: 0; }
.nav-inner { padding: 0 24px; }
.nav-inner .nav-center {
position: static;
left: auto;
transform: none;
flex: 1 1 auto;
min-width: 0;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}
.nav-inner .nav-center::-webkit-scrollbar { display: none; }

/* Under-construction banner - mobile responsive (added 2026-09-11) */
.site-banner {
position: sticky;
top: 0;
z-index: 9999;
background: repeating-linear-gradient(45deg, #f5c400, #f5c400 20px, #111 20px, #111 40px);
color: #111;
text-align: center;
padding: 12px 16px;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.site-banner span {
background: #111;
color: #ffffff;
font-weight: 800;
padding: 4px 14px;
border-radius: 3px;
display: inline-block;
}
@media (max-width: 600px) {
.site-banner {
padding: 8px 10px;
background-size: 28px 28px;
font-size: 0.8rem;
letter-spacing: 0.1px;
}
.site-banner span {
display: block;
padding: 4px 10px;
line-height: 1.35;
max-width: 100%;
}
}

/* ---- Two-row nav (added): pills get their own full-width row below the
logo/actions row, matching the pill-button nav layout used on the rest
of the site (rareleafandbriar.com root pages), instead of being squeezed
in-line next to the logo. #nav is position:fixed with its height driven
by the --nav-h variable (used by several other rules: .mobile-menu,
#app's top padding, .bid-panel, and a min-height calc), so growing the
nav for two rows just means giving --nav-h a taller value here -- every
dependent rule reads the same variable and adjusts automatically.
Scoped to width > 720px only, so the mobile hamburger menu (which hides
.nav-center/.nav-right entirely) is completely unaffected and keeps the
original single-row height.

Uses CSS Grid (not flex-wrap) for the two rows: a flex-wrap approach
with align-content:center vertically centers the *set of wrapped lines*
as a block, and when the combined content is taller than the box, that
centering pushes the top row up above the box's own top edge -- which
is exactly what happened on the first pass (the logo/logout row got
pushed out of view above the nav bar entirely). Grid rows are sized to
their own content top-down with no such centering step, so if this
height estimate is ever slightly short, the extra content just pushes
down (may slightly overlap the banner below) instead of disappearing
upward off-screen. */
@media (min-width: 721px) {
/* --nav-h was originally set to a generous 210px guess to guarantee the
two-row nav was never too short for its own box (see the long comment
this replaced). In practice the real two-row content -- logo/actions row
plus a single non-wrapping, horizontally-scrollable pill row -- only
ever needs ~105-115px (nav-inner's own padding + the two rows + the
row-gap), since .nav-center scrolls horizontally instead of wrapping to
more rows at any width down to 721px. 210px left 80-90px of dead black
space below the pills on pages whose content directly follows the nav
box (visible as an oversized-looking header), which was only invisible
by coincidence on pages whose very next section shares the nav's dark
background color. 132px kept a small safety buffer over the ~105-115px
real content height without reintroducing dead space.

Recalculated again after the Sell button was enlarged into a red CTA
and the nav-link pills were restyled -- 100px turned out too short
once the real content grew back (measured via a headless-browser
render of the actual nav markup at this CSS: 134px tall at desktop
widths), causing the nav to physically overlap the page content below
it (subnav tabs on dashboard.html, #app's own top padding), which cut
off and intercepted clicks on whatever sat underneath. Rather than
keep hand-guessing this value and re-breaking it on the next small nav
tweak, 145px is set with real buffer room (11px) over the measured
134px, so a few more pixels of future content growth won't reopen the
same overlap bug. */
:root { --nav-h: 145px; }
/* #nav sizes to its actual content instead of trusting a fixed guess for
its own box height -- no min-height here, since the two-row content
never wraps to more rows (see above), so height:auto alone can never
render shorter than the real content. overflow:visible is kept as a
guard in case a future content change ever needs more room than
expected: it renders past the box rather than being clipped or hidden
behind a higher z-index element. */
#nav { height: auto; overflow: visible; }
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-rows: auto auto;
align-items: center;
row-gap: 2px;
column-gap: 16px;
padding: 8px 24px 6px;
height: auto;
min-height: 100%;
}
.nav-inner .nav-logo-link { grid-column: 1; grid-row: 1; margin-right: 0; }
.nav-inner .nav-actions-row { grid-column: 3; grid-row: 1; }
/* Hamburger is now always visible (see .hamburger above), so it needs an
explicit spot in the grid at desktop widths too -- a 4th column on the
far right, next to Login/Join Free or the account avatar, instead of
falling into the empty middle column via default grid auto-placement. */
.nav-inner .hamburger { grid-column: 4; grid-row: 1; margin-left: 0; }
.nav-inner .nav-center {
grid-column: 1 / -1;
grid-row: 2;
  border-top: 4px solid #000;
position: static;
left: auto;
transform: none;
justify-content: center;
gap: 8px;
height: auto;
min-height: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: none;
-webkit-mask-image: none;
}

/* Auctions dropdown: Sell / Browse Auctions, added so Auctions acts as a
   menu trigger instead of navigating directly. Matches the nav-dropdown-menu
   structure inlined into dashboard.html/index.html/tobacco-lookup.html. */
#nav .nav-dropdown { position: relative; }
#nav .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: #17130d;
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  min-width: 190px;
  padding: 6px;
  z-index: 200;
}
#nav .nav-dropdown:hover .nav-dropdown-menu,
#nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
#nav .nav-dropdown-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  color: #e9e2d2 !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: none;
}
#nav .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); }
#nav .nav-dropdown-menu a[href$="#/sell"] { color: #e0685a !important; }
/* nav-center clips overflow-y for its horizontal-scroll mask; without this,
   an absolutely-positioned dropdown panel below the row gets clipped away. */
.nav-inner .nav-center:has(.nav-dropdown.open),
.nav-inner .nav-center:has(.nav-dropdown:hover) {
  overflow: visible !important;
}

.nav-inner .nav-center::-webkit-scrollbar { display: none; }

/* "Sell" pill made into its own big red call-to-action button so it's
immediately obvious as the way to start a listing, instead of blending in
with the other tan/gold pills. Matches by href ending in "#/sell" since
root-level pages link to "/auction/#/sell" while pages already inside
/auction/ link to the shorter relative "#/sell" -- $= catches both without
needing two separate rules. #nav + !important keeps the elevated-specificity
pattern used elsewhere in this file so it always wins regardless of any
per-page inline overrides. */
#nav .nav-link[href$="#/sell"] {
background: #c0392b !important;
border-color: #922b21 !important;
color: #ffffff !important;
font-size: 1.05rem !important;
padding: 10px 22px !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 3px 8px rgba(192,57,43,0.45) !important;
}
#nav .nav-link[href$="#/sell"]:hover {
background: #d64535 !important;
border-color: #a83a2a !important;
color: #ffffff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 12px rgba(192,57,43,0.6) !important;
transform: translateY(-1px);
}
#nav .nav-link[href$="#/sell"].active {
background: #922b21 !important;
border-color: #7a2018 !important;
color: #ffffff !important;
}

/* Bumped to match the pill size used on the main site's own nav
(.nav-links a in styles2.css: font-size 0.74rem, padding 0.45rem 0.9rem)
so the auction pages' pill nav no longer reads smaller side-by-side. */
.nav-link {
font-size: 0.74rem;
padding: 7px 14px;
}
}

/* ── Plain white wordmark, no crest ──
Several auction-family pages (index.html, dashboard.html,
tobacco-lookup.html, account.html, admin.html, etc.) each carry their
own inline <style> block that sizes .nav-logo-img as a text span
(height:55px on desktop, height:80px/68px at their own 768px/480px
breakpoints, some !important). Since those live in per-page <head>
blocks that load AFTER this shared stylesheet, a plain rule here would
lose the cascade tie on every page that also uses !important. Elevated
specificity (#nav .nav-logo-img) beats a bare .nav-logo-img selector
regardless of !important or source order, so this one edit applies
everywhere without needing to touch each page. No crest icon — large
bold white text only, sized so "Rare Leaf & Briar" spans ~3in (288px)
wide on desktop, scaling down at the phone breakpoints so the header
doesn't grow taller than a single text row. */
#nav .nav-logo-img {
display: block !important;
width: auto !important;
height: auto !important;
background: none !important;
text-indent: 0 !important;
overflow: visible !important;
white-space: nowrap !important;
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
font-style: normal !important;
font-weight: 700 !important;
font-size: 2.25rem !important;
color: #ffffff !important;
letter-spacing: 0.01em !important;
}
@media (max-width: 768px) {
#nav .nav-logo-img {
font-size: 1.28rem !important;
}
}
@media (max-width: 480px) {
#nav .nav-logo-img {
font-size: 1.0rem !important;
}
}

/* Header-integrated Create Auction button (desktop, empty grid-column 2) -- added 2026-09-15 */
@media (min-width: 721px) {
  .nav-inner .nav-create-cta {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    background: #c0392b;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 22px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .nav-inner .nav-create-cta:hover {
    background: #a93226;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  #rlb-global-create-auction-btn {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .nav-inner .nav-create-cta {
    display: none;
  }
}

/* Mobile-only extra hero CTAs: Browse Shop + Consignments (hidden on desktop, shown on mobile) */
.hero-cta-mobile-extra{ display:none; }
@media (max-width:768px){
  .hero-cta-mobile-extra{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Hero CTA buttons - dark gray, no gold (matches site-wide button treatment) */
.hero-cta .btn-gold {
  background: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}
.hero-cta .btn-gold:hover {
  background: #363636 !important;
  border-color: #363636 !important;
  color: #ffffff !important;
}
.hero-cta .btn-outline-gold {
  background: transparent !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}
.hero-cta .btn-outline-gold:hover {
  background: #4a4a4a !important;
  border-color: #4a4a4a !important;
  color: #ffffff !important;
}

/* Hero content box - white rounded card over background image */
.hero-content-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  position: relative;
  z-index: 2;
}
.hero-content-box .hero-eyebrow { color: #6b6660; }
.hero-content-box .hero-eyebrow::before,
.hero-content-box .hero-eyebrow::after { background: rgba(0,0,0,0.15); }
.hero-content-box h1 { color: #1a1a1a; text-shadow: none; }
.hero-content-box h1 span { color: #4a4a4a; }
.hero-content-box p { color: #4a4a4a; }
@media (max-width: 480px) {
  .hero-content-box { padding: 28px 22px; border-radius: 16px; }
}

/* Fix outline button contrast inside white hero box */
.hero-content-box .hero-cta .btn-outline-gold {
  color: #1a1a1a !important;
  border-color: #4a4a4a !important;
  background: transparent !important;
}
.hero-content-box .hero-cta .btn-outline-gold:hover {
  background: #4a4a4a !important;
  color: #ffffff !important;
}

/* Hero CTA: red accent buttons + mobile stacking order */
.hero-cta .hero-btn-browse,
.hero-cta .hero-btn-sell {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #ffffff !important;
}
.hero-cta .hero-btn-browse:hover,
.hero-cta .hero-btn-sell:hover {
  background: #a53125 !important;
  border-color: #a53125 !important;
  color: #ffffff !important;
}
@media (max-width: 768px) {
  .hero-cta .hero-btn-browse { order: 1; }
  .hero-cta .hero-btn-shop { order: 2; }
  .hero-cta .hero-btn-consign { order: 3; }
  .hero-cta .hero-btn-sell { order: 4; }
}

/* Higher-specificity fix: ensure red wins over outline-gold box override */
#hero-section .hero-cta .hero-btn-browse,
#hero-section .hero-cta .hero-btn-sell {
  background: #c0392b !important;
  border-color: #c0392b !important;
  color: #ffffff !important;
}
#hero-section .hero-cta .hero-btn-browse:hover,
#hero-section .hero-cta .hero-btn-sell:hover {
  background: #a53125 !important;
  border-color: #a53125 !important;
  color: #ffffff !important;
}

/* Guarantee minimum gap between logo and search icon on mobile (prevents mis-taps) */
@media (max-width: 480px) {
  .nav-inner .nav-logo-link { margin-right: 10px; }
}

/* Hide inline Logout button in nav-actions-row on mobile so it can't push the hamburger off-screen; mobile-menu already has its own Logout link */
@media (max-width: 768px) {
  #nav-auth button.btn-ghost { display: none !important; }
}