/* ===== SWA Auction Theme ===== */
/* Colors extracted from swaauction.com logo and live site screenshots */
/* Logo colors: maroon red, olive/sage green, warm tan/gold, brown */
/* Site uses: maroon text, wood texture bg, cream content panels */

/* Accessibility: skip-to-content link, visible only when keyboard-focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: #6b1c23;
    color: #fff;
    border-radius: 0 0 4px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

:root {
    --swa-maroon: #6b1c23;
    --swa-maroon-light: #8a2730;
    --swa-maroon-dark: #4e131a;
    --swa-olive: #4a6741;
    --swa-olive-light: #5a7d4f;
    --swa-olive-dark: #3a5233;
    --swa-tan: #c4956a;
    --swa-tan-light: #d4ac85;
    /* AA-contrast tan for text on white (the base tan is only ~2.5:1). */
    --swa-tan-deep: #8f6238;
    --swa-gold: #c8a84e;
    --swa-cream: #f5efe6;
    --swa-warm-white: #ebe4d8;
    --swa-brown: #5c3a21;
    --swa-brown-light: #7a5235;
    --swa-green-price: #2d6a4f;
    --swa-border: #ddd5c8;
    --swa-text: #3b2218;
    --swa-text-muted: #7a6b5d;
    --swa-wood: #3e2a1a;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shadow-sm: 0 1px 3px rgba(60, 34, 21, 0.08);
    --shadow-md: 0 6px 20px rgba(60, 34, 21, 0.10);
    --shadow-lg: 0 18px 44px rgba(60, 34, 21, 0.18);
}

/* ===== Base ===== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--swa-wood);
    color: var(--swa-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use the Fraunces display serif for editorial, heritage character */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.section-heading,
.hero-swa h1,
.submit-hero h1,
.stat-value,
.card-title,
.card h5,
.card h6 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

main {
    flex: 1;
    background-color: var(--swa-warm-white);
}

/* ===== Focus States ===== */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--swa-tan);
}

/* ===== Announcement Banner ===== */
.announcement-banner {
    background-color: var(--swa-gold);
    color: var(--swa-wood);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===== Top Info Bar ===== */
.top-bar {
    background-color: var(--swa-maroon-dark);
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    padding: 0.35rem 0;
}

.top-bar a {
    color: var(--swa-tan-light);
    text-decoration: none;
}

.top-bar a:hover {
    color: #fff;
}

/* Sticky header wrapper (direct child of body, so it has room to stick) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ===== Navbar: single spanning banner ===== */
.navbar-swa {
    background: linear-gradient(180deg, var(--swa-maroon-dark) 0%, var(--swa-maroon) 100%) !important;
    border-bottom: 3px solid var(--swa-gold);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    transition: padding 0.22s ease, box-shadow 0.22s ease;
}

/* Compact, shadowed state once the page scrolls */
.navbar-swa.is-stuck {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    box-shadow: 0 6px 22px rgba(40, 15, 18, 0.28);
}

.navbar-swa .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 1.5rem;
}

.navbar-swa .navbar-brand img {
    height: 92px;
    width: auto;
    transition: height 0.22s ease;
}

.navbar-swa.is-stuck .navbar-brand img {
    height: 60px;
}

.navbar-cta .btn-gold {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .navbar-swa .navbar-brand img { height: 64px; }
    .navbar-cta { margin-top: 0.75rem; gap: 1rem !important; }
}

.navbar-swa .nav-link {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-left: 1.05rem !important;
    padding-right: 1.05rem !important;
    position: relative;
    transition: color 0.2s;
}

/* Slick gold underline that grows on hover / active */
.navbar-swa .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--swa-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.navbar-swa .navbar-nav .nav-link:hover::after,
.navbar-swa .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-swa .nav-link:hover,
.navbar-swa .nav-link.active {
    color: #fff !important;
}

/* CTA cluster: keep the staff links lighter weight than the gold button */
.navbar-cta .nav-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

/* ===== Hero Section (photographic) ===== */
.hero-swa {
    position: relative;
    color: #fff;
    min-height: 540px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden; /* zoomed (scaled) images must not spill out of the hero */
}

/* Cross-fading multi-type slideshow (managed in the admin). JS toggles
   .is-active; the CSS opacity transition crossfades, so the outgoing and
   incoming images always overlap (no bare-scrim gap), for any image count.
   Real <img> elements so staff-set framing works: object-position aims the
   focal point, and zoom is a transform scaled toward that same point. */
.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-media.is-active {
    opacity: 1;
}

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

/* Maroon wash: opaque on the left for legible copy, clearing to reveal the photo on the right */
.hero-swa::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(40,15,18,0.96) 0%, rgba(53,14,18,0.92) 42%, rgba(78,19,26,0.62) 68%, rgba(78,19,26,0.18) 100%),
        linear-gradient(0deg, rgba(40,15,18,0.65) 0%, transparent 50%);
}

.hero-swa::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--swa-gold), var(--swa-tan));
}

.hero-content {
    position: relative;
    z-index: 1; /* establish a stacking context so the scrim below sits above the photo */
    max-width: 660px;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Dedicated scrim behind the copy block so text keeps contrast over busy
   areas of the photo, while the right side of the image stays visible. */
.hero-content::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: -50vw;
    right: -1.5rem;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(40, 15, 18, 0.9) 70%,
        rgba(40, 15, 18, 0.55) 88%,
        rgba(40, 15, 18, 0) 100%);
    filter: blur(2px);
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--swa-gold);
    margin-bottom: 1rem;
    opacity: 0;
    animation: heroRise 0.6s ease 0.1s forwards;
}

.hero-swa h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 600;
    line-height: 1.05;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    opacity: 0;
    animation: heroRise 0.6s ease 0.22s forwards;
}

.hero-swa .lead {
    color: rgba(255,255,255,0.94);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 31rem;
    margin-bottom: 1.75rem;
    text-shadow: 0 1px 12px rgba(40,15,18,0.6);
    opacity: 0;
    animation: heroRise 0.6s ease 0.34s forwards;
}

.hero-types {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--swa-gold);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: heroRise 0.6s ease 0.44s forwards;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    opacity: 0;
    animation: heroRise 0.6s ease 0.56s forwards;
}

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

/* Entrance animation hides content behind opacity:0 — show it immediately for
   users who've asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow, .hero-swa h1, .hero-swa .lead, .hero-types, .hero-cta {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .hero-swa { min-height: 460px; }
}

/* ===== Buttons ===== */
.btn-gold,
.btn-swa,
.btn-swa-primary,
.btn-olive,
.btn-outline-swa,
.btn-outline-olive {
    border-radius: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-gold:hover,
.btn-swa:hover,
.btn-swa-primary:hover,
.btn-olive:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-lg {
    padding: 0.7rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-gold {
    /* Dark text on the tan: white-on-tan is ~2.5:1 and fails WCAG AA. */
    background-color: var(--swa-tan);
    color: #2d1a0e;
    border: none;
    font-weight: 600;
}

.btn-gold:hover {
    background-color: var(--swa-brown-light);
    color: #fff;
}

.btn-swa {
    background-color: var(--swa-maroon);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-swa:hover {
    background-color: var(--swa-maroon-light);
    color: #fff;
}

.btn-olive {
    background-color: var(--swa-olive);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-olive:hover {
    background-color: var(--swa-olive-light);
    color: #fff;
}

.btn-outline-swa {
    color: var(--swa-maroon);
    border-color: var(--swa-maroon);
    font-weight: 600;
}

.btn-outline-swa:hover {
    background-color: var(--swa-maroon);
    color: #fff;
}

.btn-outline-olive {
    color: var(--swa-olive);
    border-color: var(--swa-olive);
    font-weight: 600;
}

.btn-outline-olive:hover {
    background-color: var(--swa-olive);
    color: #fff;
}

/* ===== Stats Bar ===== */
.stats-bar {
    background-color: var(--swa-cream);
    border-top: 1px solid var(--swa-border);
    border-bottom: 1px solid var(--swa-border);
    padding: 1.25rem 0;
}

.stats-bar .stat-value {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--swa-maroon);
    line-height: 1.1;
}

.stats-bar .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--swa-text-muted);
    font-weight: 600;
}

/* ===== Section Headings ===== */
.section-heading {
    font-weight: 600;
    color: var(--swa-maroon);
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--swa-gold), var(--swa-tan));
}

/* Small uppercase eyebrow used above section headings */
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--swa-tan-deep);
}

.section-heading-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--swa-border);
    border-radius: 0.65rem;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.card-listing,
.card-news {
    overflow: hidden;
}

.card-listing:hover,
.card-news:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* Subtle zoom on card imagery */
.card-listing .card-img-top,
.card-news .card-img-top {
    transition: transform 0.4s ease;
}

.card-listing:hover .card-img-top,
.card-news:hover .card-img-top {
    transform: scale(1.04);
}

.card-img-top {
    background-color: var(--swa-cream);
    border-radius: 0.65rem 0.65rem 0 0;
}

/* ===== Image Placeholder ===== */
.img-placeholder {
    background-color: var(--swa-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swa-text-muted);
    font-size: 0.9rem;
}

/* ===== Listing Cards ===== */
.listing-price {
    font-weight: 700;
    color: var(--swa-green-price);
    font-size: 1.1rem;
}

/* ===== Badges ===== */
.badge {
    font-weight: 500;
}

.badge-forsale {
    background-color: var(--swa-olive) !important;
    color: #fff;
    font-weight: 600;
}

.badge-wanted {
    background-color: #2563eb !important;
    color: #fff;
    font-weight: 600;
}

.badge-trade {
    background-color: var(--swa-tan) !important;
    color: #2d1a0e;
    font-weight: 600;
}

.badge-negotiable {
    background-color: transparent !important;
    color: var(--swa-olive);
    border: 1px solid var(--swa-olive);
    font-weight: 600;
}

.badge-status-full {
    background-color: var(--swa-maroon) !important;
    color: #fff;
    font-weight: 700;
}

.badge-status-open {
    background-color: var(--swa-olive) !important;
    color: #fff;
    font-weight: 600;
}

.badge-status-pending {
    background-color: var(--swa-tan) !important;
    color: #2d1a0e;
    font-weight: 600;
}

/* ===== Upcoming Auctions ===== */
.auction-list .auction-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--swa-border);
}

.auction-list .auction-item:last-child {
    border-bottom: none;
}

.auction-info {
    flex: 1;
    min-width: 0;
}

.auction-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.auction-actions .btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.auction-date {
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.auction-date .date-month {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: var(--swa-maroon);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
    line-height: 1.4;
}

.auction-date .date-day {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--swa-maroon);
    background-color: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-top: none;
    padding: 0.1rem 0.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    line-height: 1.3;
}

.auction-info h6 {
    color: var(--swa-text);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.auction-info small {
    color: var(--swa-text-muted);
}

/* ===== Auction Timeline (public page) ===== */
.auction-timeline {
    position: relative;
    padding-left: 0;
}

.auction-entry {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.auction-entry-date {
    flex-shrink: 0;
    width: 80px;
    padding-top: 0.75rem;
}

.auction-entry-date .auction-date {
    width: 80px;
    text-align: center;
}

.auction-entry-date .date-month {
    padding: 0.2rem 0;
    width: 100%;
    box-sizing: border-box;
}

.auction-entry-date .date-day {
    padding: 0.25rem 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auction-entry-content {
    flex: 1;
    min-width: 0;
}

/* ===== Auction card photo (upcoming/past lists) =====
   The entry runs the full width of the page, so a photo above the text can only
   ever be a shallow band across it — a dog photographed standing up came out as
   a strip of its middle. Beside the text instead, the picture gets a column tall
   enough to be a picture.

   Nothing is cropped, because what shows up here is a sale bill printed portrait
   on one auction and a landscape lot photo on the next, and nothing sensible can
   be cropped from both. Nothing is letterboxed either: rather than fitting each
   picture into one fixed box and padding out whatever is left over, the column
   is given its width and each picture sets its own height. A tall bill makes a
   tall column, a wide photo a short one, and neither one grows bars. */
.auction-card-media {
    display: flex;
    align-items: stretch;
    overflow: hidden; /* let the panel take the card's rounded corners */
}

.auction-card-media > .card-body {
    flex: 1;
    min-width: 0;
}

/* A panel the full height of the entry, dark so the picture reads as a picture
   and not as part of the card, and the photo centred inside it. The dark ground
   is the same one the gallery on the details page sits on. */
.auction-entry-media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 clamp(200px, 26%, 300px);
    padding: 0.5rem;
    background: #14100f;
    border-right: 1px solid var(--swa-border);
}

/* Bounded on both sides and sized by neither, so the picture keeps its own shape
   whatever shape that is. It sets the panel's height when it is the taller of
   the two, which is how a portrait sale bill gets its room; when the text is
   taller the panel takes that height instead and the picture sits centred in it.
   The cap catches a freakishly tall bill before it makes a card three screens
   deep. */
.auction-entry-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 460px;
}

/* Fitted whole, a sale bill ends up small, so the picture itself opens the sale
   rather than making people find the button to see it larger. */
.auction-entry-media:hover img,
.auction-entry-media:focus-visible img {
    opacity: 0.88;
}

/* Stacked on a phone, where there is no width to put the two side by side. The
   picture keeps its own shape here too; it is only held back from filling the
   whole screen and pushing the sale's date and place below the fold. */
@media (max-width: 575.98px) {
    .auction-card-media {
        display: block;
    }

    .auction-entry-media {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--swa-border);
    }

    .auction-entry-media img {
        max-height: 62vh;
    }
}

/* Cancelled auction entry */
.auction-entry-cancelled .card {
    opacity: 0.7;
    border-left: 4px solid #dc3545;
}

.auction-entry-cancelled .card:hover {
    opacity: 0.85;
}

.auction-entry-cancelled .auction-title {
    text-decoration: line-through;
    text-decoration-color: rgba(220, 53, 69, 0.5);
}

.auction-entry-cancelled .date-month {
    background-color: #dc3545 !important;
}

.auction-entry-cancelled .date-day {
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.auction-cancelled-notice {
    font-size: 0.8rem;
    color: #dc3545;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Past auctions */
.auction-past .card {
    opacity: 0.75;
}

.auction-past .card:hover {
    opacity: 1;
}

/* ===== Auction Status Badges ===== */
.badge-draft {
    background-color: #6c757d !important;
    color: #fff;
    font-weight: 600;
}

.badge-published {
    background-color: var(--swa-olive) !important;
    color: #fff;
    font-weight: 600;
}

.badge-completed {
    background-color: var(--swa-tan) !important;
    color: #fff;
    font-weight: 600;
}

.badge-cancelled {
    background-color: #dc3545 !important;
    color: #fff;
    font-weight: 600;
}

/* ===== Fraud Alert Section ===== */


/* ===== News Cards ===== */
.card-news {
    border-left: 4px solid var(--swa-tan);
}

.card-news .news-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--swa-text-muted);
    font-weight: 600;
}

/* ===== Services Section ===== */


/* ===== Footer ===== */
.footer-swa {
    background-color: var(--swa-wood);
    color: rgba(255,255,255,0.8);
    padding: 3rem 0 1.5rem;
}

.footer-swa h5,
.footer-swa h6 {
    color: var(--swa-tan-light);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-swa a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-swa a:hover {
    color: var(--swa-tan-light);
}

.footer-swa .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.footer-swa .footer-brand img {
    height: 60px;
    width: auto;
    border-radius: 0.25rem;
}

.footer-swa .footer-divider {
    border-color: rgba(255,255,255,0.15);
    margin: 1.5rem 0 1rem;
}

.footer-swa .footer-bottom {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.footer-swa .license-badge {
    display: inline-block;
    background-color: rgba(196,149,106,0.15);
    border: 1px solid rgba(196,149,106,0.3);
    border-radius: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    color: var(--swa-tan-light);
    font-family: monospace;
}

.footer-swa .naa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

.footer-swa .naa-badge img {
    height: 24px;
    width: auto;
    border-radius: 3px; /* the logo has a baked-in white card; soften its corners */
}

/* ===== Tables ===== */
.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--swa-text-muted);
    border-bottom-color: var(--swa-border);
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
    font-size: 0.875rem;
    background: none;
    padding: 0;
}

.breadcrumb a {
    color: var(--swa-maroon);
}

.breadcrumb a:hover {
    color: var(--swa-brown);
}

/* ===== Pagination ===== */
.pagination {
    gap: 0.25rem;
}

.page-link {
    border-radius: 0.375rem;
    color: var(--swa-maroon);
    border-color: var(--swa-border);
}

.page-link:hover {
    background-color: var(--swa-cream);
    color: var(--swa-maroon);
    border-color: var(--swa-tan);
}

.page-item.active .page-link {
    background-color: var(--swa-maroon);
    border-color: var(--swa-maroon);
}

/* ===== Forms ===== */
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--swa-text);
}

.form-control,
.form-select {
    border-color: var(--swa-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--swa-tan);
}

/* ===== Filter Card ===== */
.card-filters .card-header {
    background-color: var(--swa-maroon);
    color: #fff;
    font-weight: 600;
}

/* ===== Hero Search Card ===== */



/* ===== Advocacy Card ===== */


/* ===== CTA Cards ===== */
.cta-card {
    border: 2px solid var(--swa-border);
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cta-card:hover {
    border-color: var(--swa-maroon);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
}

.cta-card-icon {
    color: var(--swa-maroon);
    flex-shrink: 0;
}

/* ===== Alert overrides ===== */
.alert-info {
    background-color: var(--swa-cream);
    border-color: var(--swa-border);
    color: var(--swa-text);
}

/* ===== Utility ===== */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-gold {
    color: var(--swa-tan-light) !important;
}

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

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

.bg-swa {
    background-color: var(--swa-maroon) !important;
}

.bg-cream {
    background-color: var(--swa-cream) !important;
}

.bg-warm {
    background-color: var(--swa-warm-white) !important;
}

/* ===== Image Upload Area ===== */
.image-upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--swa-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    cursor: pointer;
    text-align: center;
    color: var(--swa-text-muted);
    transition: border-color 0.2s, background-color 0.2s;
}

.image-upload-area:hover {
    border-color: var(--swa-tan);
    background-color: var(--swa-cream);
}

.image-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* ===== Shared brand helpers ===== */
.btn-swa-primary {
    background-color: var(--swa-maroon);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-swa-primary:hover,
.btn-swa-primary:focus {
    background-color: var(--swa-maroon-light);
    color: #fff;
}
.text-swa-price { color: var(--swa-green-price); font-weight: 700; }
.border-swa { border: 1px solid var(--swa-gold) !important; }

/* ===== Submit page ===== */
.submit-hero {
    background: linear-gradient(135deg, var(--swa-maroon) 0%, var(--swa-maroon-dark) 70%, #2a0f12 100%);
    color: #fff;
    padding: 3rem 0;
    border-bottom: 4px solid var(--swa-gold);
}
.submit-hero h1 {
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    margin-bottom: .5rem;
}
.submit-hero .lead { color: rgba(255,255,255,0.9); max-width: 44rem; }

/* Editorial form sections */
.form-section .card-body { padding: 1.6rem 1.75rem; }
.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--swa-border);
}
.form-step {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--swa-maroon);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
}
.form-section-title {
    color: var(--swa-maroon);
    font-size: 1.3rem;
    margin: 0;
}
.form-section-hint {
    color: var(--swa-text-muted);
    font-size: 0.86rem;
    margin: 0.1rem 0 0;
}

/* Photo dropzone */
.photo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    padding: 2rem 1rem;
    border: 2px dashed var(--swa-border);
    border-radius: 0.65rem;
    background: var(--swa-cream);
    color: var(--swa-text-muted);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.photo-dropzone:hover,
.photo-dropzone.dragging {
    border-color: var(--swa-maroon);
    color: var(--swa-maroon);
    background: #fff;
}
.photo-dropzone.has-files { border-style: solid; border-color: var(--swa-olive); }
.photo-dropzone-title { font-weight: 600; }
.photo-dropzone-hint { font-size: 0.82rem; }

.submit-fee-card { box-shadow: var(--shadow-md); }

/* Submission preview */
.preview-banner {
    background: var(--swa-maroon);
    color: #fff;
    padding: 0.6rem 0;
    font-size: 0.9rem;
}
.preview-banner svg { flex: 0 0 auto; }
.preview-actions { box-shadow: var(--shadow-md); }

/* Success receipt card */
.receipt-card {
    border: 1px solid var(--swa-border);
    border-radius: 0.6rem;
    background: var(--swa-cream);
    padding: 1rem 1.25rem;
}
.receipt-ref {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--swa-maroon);
}

/* Printable invoice */
.invoice-sheet {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    padding: 2.25rem 2.5rem;
    box-shadow: var(--shadow-md);
}
.invoice-head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--swa-maroon);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}
.invoice-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--swa-maroon);
    line-height: 1.1;
}
.invoice-brand-sub {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 0.72rem;
    color: var(--swa-tan-deep);
    margin-top: 0.15rem;
}
.invoice-brand-contact { font-size: 0.85rem; color: #555; margin-top: 0.75rem; }
.invoice-meta { text-align: right; }
.invoice-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: .12em;
    color: var(--swa-olive);
    margin: 0 0 0.5rem;
}
.invoice-meta table { margin-left: auto; font-size: 0.86rem; }
.invoice-meta th { text-align: left; color: #888; font-weight: 500; padding: 0.1rem 0.75rem 0.1rem 0; text-transform: uppercase; letter-spacing: .06em; font-size: 0.72rem; }
.invoice-meta td { text-align: right; font-weight: 600; }
.invoice-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: .05em;
}
.invoice-status.is-paid { background: #1e7d4f; color: #fff; }
.invoice-status.is-pending { background: var(--swa-gold); color: #3a2c00; }
.invoice-section-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 0.72rem;
    color: #888;
    margin-bottom: 0.25rem;
}
.invoice-billto { margin-bottom: 1.75rem; }
.invoice-lines { width: 100%; border-collapse: collapse; }
.invoice-lines thead th {
    text-align: left;
    border-bottom: 1.5px solid var(--swa-border);
    padding: 0.5rem 0;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #888;
}
.invoice-lines tbody td { padding: 0.85rem 0; border-bottom: 1px solid var(--swa-border); vertical-align: top; }
.invoice-lines tfoot th { padding: 0.85rem 0; font-size: 1.05rem; color: var(--swa-maroon); }
.invoice-foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--swa-border); }

@media print {
    .site-header, .footer-swa, .no-print { display: none !important; }
    body { background: #fff !important; }
    .invoice-sheet { border: none; box-shadow: none; max-width: 100%; padding: 0; }
    .container { padding: 0 !important; }
}

/* Contact-preference selector (Submit form) */
.contact-pref-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 575.98px) {
    .contact-pref-options { grid-template-columns: 1fr; }
}
.contact-pref-option { margin: 0; cursor: pointer; }
.contact-pref-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.contact-pref-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.75rem 0.85rem;
    border: 1.5px solid var(--swa-border);
    border-radius: 0.55rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.contact-pref-option:hover .contact-pref-card { border-color: var(--swa-tan); }
.contact-pref-option input:checked + .contact-pref-card {
    border-color: var(--swa-maroon);
    background: var(--swa-cream);
    box-shadow: 0 0 0 1px var(--swa-maroon) inset;
}
.contact-pref-option input:focus-visible + .contact-pref-card {
    outline: 2px solid var(--swa-gold);
    outline-offset: 2px;
}
.contact-pref-title { font-weight: 600; font-size: 0.92rem; }

/* Advertising terms the submitter accepts before checkout. */
.ad-terms {
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-radius: 0.55rem;
    padding: 1rem 1.1rem;
}
.ad-terms-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.ad-terms-list li + li { margin-top: 0.4rem; }

/* Run length on the payment page: any number of months, typed or stepped. */
.term-picker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.term-step {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--swa-maroon);
    background: #fff;
    border: 1.5px solid var(--swa-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.term-step:hover:not(:disabled) { border-color: var(--swa-maroon); background: var(--swa-cream); }
.term-step:disabled { opacity: 0.4; cursor: default; }
.term-step:focus-visible { outline: 2px solid var(--swa-gold); outline-offset: 2px; }
.term-input {
    width: 5rem;
    padding: 0.5rem 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--swa-maroon);
    background: #fff;
    border: 1.5px solid var(--swa-border);
    border-radius: 0.55rem;
}
.term-input:focus-visible { outline: 2px solid var(--swa-gold); outline-offset: 1px; }
.term-unit { font-weight: 600; }

/* Aside: how it works */
.aside-card {
    background: #fff;
    border: 1px solid var(--swa-border);
    border-top: 3px solid var(--swa-gold);
    border-radius: 0.65rem;
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.aside-title {
    color: var(--swa-maroon);
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
}
.process-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.process-list li {
    display: flex;
    gap: 0.8rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed var(--swa-border);
}
.process-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.process-num {
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--swa-cream);
    border: 1.5px solid var(--swa-tan);
    color: var(--swa-maroon);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-list strong { display: block; color: var(--swa-text); font-size: 0.95rem; }
.process-list small { color: var(--swa-text-muted); }
.aside-note {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    background: var(--swa-cream);
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: var(--swa-text);
}
.aside-note a { color: var(--swa-maroon); font-weight: 600; }

@media (min-width: 992px) {
    .submit-aside { position: sticky; top: 104px; }
}

.photo-preview { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-preview img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: .375rem;
    border: 1px solid var(--swa-border);
}

/* Admin photo manager grid */
.admin-photo {
    position: relative;
    border: 1px solid var(--swa-border);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--swa-cream);
}
.admin-photo.is-primary { border-color: var(--swa-maroon); box-shadow: 0 0 0 2px var(--swa-maroon) inset; }
.admin-photo img { width: 100%; height: 140px; object-fit: cover; display: block; }
.admin-photo-tag { position: absolute; top: .4rem; left: .4rem; }
.admin-photo-actions {
    display: flex;
    gap: .35rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: .4rem;
}
.admin-photo-actions form { margin: 0; }

.summary-box {
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
}

.success-check { color: var(--swa-olive); }

.moderation-log li { border-left: 3px solid var(--swa-border); padding-left: .6rem; }

/* ===== Auction type filter + badges ===== */
.auction-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.auction-chip {
    border: 1.5px solid var(--swa-border);
    background: #fff;
    color: var(--swa-text);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.auction-chip:hover { border-color: var(--swa-maroon); color: var(--swa-maroon); }
.auction-chip.active { background: var(--swa-maroon); border-color: var(--swa-maroon); color: #fff; }

.badge-type-dogs { background-color: var(--swa-maroon); color: #fff; }
.badge-type-realestate { background-color: var(--swa-olive); color: #fff; }
.badge-type-equipment { background-color: var(--swa-brown-light); color: #fff; }

/* ===== Auction type cards (homepage) ===== */
.type-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--swa-border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.type-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.type-card-media {
    height: 220px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.type-card:hover .type-card-media { transform: scale(1.06); }
.type-card-body { padding: 1.35rem 1.4rem 1.6rem; }
.type-card-body h3 {
    color: var(--swa-maroon);
    font-size: 1.35rem;
    margin-bottom: 0.45rem;
}
.type-card-body p {
    color: var(--swa-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.type-card-link {
    color: var(--swa-tan);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: color 0.2s ease;
}
.type-card:hover .type-card-link { color: var(--swa-maroon); }

/* ===== Photographic CTA band ===== */
.cta-band {
    position: relative;
    color: #fff;
    padding: 4.5rem 0;
    overflow: hidden;
}
.cta-band-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(40,15,18,0.92) 0%, rgba(78,19,26,0.86) 100%);
}
.cta-band::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--swa-gold), var(--swa-tan));
}
.cta-band-content { position: relative; }
.cta-band-content h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 600;
}
.cta-band-content .lead { color: rgba(255,255,255,0.9); }

/* ===== Listing detail page ===== */
.gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.85rem;
    box-shadow: var(--shadow-md);
    background: var(--swa-cream);
}
.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.gallery-thumb {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.72;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.gallery-thumb:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumb.active { border-color: var(--swa-maroon); opacity: 1; }

.detail-title {
    color: var(--swa-maroon);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.1;
}
.detail-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--swa-green-price);
}
.detail-price-muted { color: var(--swa-text-muted); font-size: 1.5rem; }

.detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.25rem;
    margin: 0 0 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--swa-border);
    border-bottom: 1px solid var(--swa-border);
}
.detail-meta dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--swa-text-muted);
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.detail-meta dd { margin: 0; font-weight: 500; }

.contact-card {
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-radius: 0.65rem;
    padding: 1.1rem 1.2rem;
}

.detail-description {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--swa-text);
}

@media (min-width: 992px) {
    .detail-panel { position: sticky; top: 104px; }
}

/* ===== Classifieds browse grid ===== */
.card-listing .card-footer {
    border-top: 1px solid var(--swa-border);
}

/* ===== Header "Upcoming Auctions" hover dropdown ===== */
.navbar-swa .nav-dropdown-menu {
    border: none;
    border-top: 3px solid var(--swa-gold);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 0.4rem 0;
    min-width: 232px;
    margin-top: 0.45rem;
}
.navbar-swa .nav-dropdown-menu .dropdown-item {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    color: var(--swa-text);
    transition: background 0.15s ease, color 0.15s ease;
}
.navbar-swa .nav-dropdown-menu .dropdown-item:hover,
.navbar-swa .nav-dropdown-menu .dropdown-item:focus {
    background: var(--swa-cream);
    color: var(--swa-maroon);
}

@media (min-width: 992px) {
    .nav-dropdown { position: relative; }
    .nav-dropdown:hover > .nav-dropdown-menu,
    .nav-dropdown:focus-within > .nav-dropdown-menu,
    .nav-dropdown.is-open > .nav-dropdown-menu { /* touch: first tap opens (site.js) */
        display: block;
    }
    /* invisible bridge so the menu doesn't close when crossing the gap */
    .nav-dropdown::after {
        content: '';
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        height: 0.9rem;
        display: none;
    }
    .nav-dropdown:hover::after { display: block; }
}

@media (max-width: 991.98px) {
    .navbar-swa .nav-dropdown-menu {
        display: block;
        position: static;
        float: none;
        background: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0 0 0.4rem 0.85rem;
        min-width: 0;
    }
    .navbar-swa .nav-dropdown-menu .dropdown-item {
        color: rgba(255,255,255,0.82);
        padding: 0.4rem 0.5rem;
    }
    .navbar-swa .nav-dropdown-menu .dropdown-item:hover {
        background: transparent;
        color: #fff;
    }
}

/* ===== Footer staff link (tucked away) ===== */
.footer-staff a,
.footer-staff-link {
    color: var(--swa-tan-light);
    font-size: 0.8rem;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.footer-staff a:hover,
.footer-staff-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Right-align the header dropdowns so they never overflow the right edge */
@media (min-width: 992px) {
    .navbar-swa .nav-dropdown-menu.dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* Offset anchor jumps (e.g. Contact -> footer) for the sticky header */
#contact { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Friendly sign-off on the homepage about section */
.about-signoff {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--swa-maroon);
}

/* Footer social link */
.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--swa-tan-light);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.footer-social:hover { color: #fff; }
.footer-swa .text-muted-light { color: rgba(255,255,255,0.55); }

/* Area lodging cards (auctions page) */
.lodging-card {
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-left: 3px solid var(--swa-tan);
    border-radius: 0.5rem;
    padding: 1rem 1.2rem;
    height: 100%;
}
.lodging-card h6 {
    color: var(--swa-maroon);
    margin-bottom: 0.4rem;
    font-size: 1rem;
}
.lodging-card a { color: var(--swa-maroon); font-weight: 600; }

/* Footer alerts band + QR */
.footer-alerts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.3rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.6rem;
    font-size: 0.86rem;
}
.footer-alerts a { color: var(--swa-gold); font-weight: 600; }
.footer-qr { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.footer-qr img {
    width: 96px;
    height: 96px;
    background: #fff;
    padding: 6px;
    border-radius: 6px;
    image-rendering: pixelated;
}
.footer-qr span {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Date-TBD auctions (e.g. hunting auction pending gun entries) */
.auction-date .date-tbd {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: #fff;
    background-color: var(--swa-olive);
    border-radius: 0.25rem;
    padding: 0.6rem 0.4rem;
    line-height: 1.1;
}
/* A note on an auction card. Was .auction-tbd-notice, back when notes only
   appeared on auctions with an unfixed date. */
.auction-note {
    background: #fbf3df;
    border-left: 3px solid var(--swa-gold);
    border-radius: 0.35rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.65rem;
    color: var(--swa-text);
}

/* ===== FAQ accordion ===== */
.swa-accordion {
    --bs-accordion-active-bg: var(--swa-cream);
    --bs-accordion-active-color: var(--swa-maroon);
    --bs-accordion-border-color: var(--swa-border);
    --bs-accordion-btn-color: var(--swa-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(196, 149, 106, 0.35);
    --bs-accordion-btn-focus-border-color: var(--swa-tan);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b1c23'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b1c23'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.swa-accordion .accordion-item {
    border: 1px solid var(--swa-border);
    margin-bottom: 0.6rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.swa-accordion .accordion-button {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--swa-text);
}
.swa-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: var(--swa-maroon);
}
.swa-accordion .accordion-body {
    color: var(--swa-text);
    line-height: 1.65;
    font-size: 0.95rem;
}


/* ===== Classifieds board (newspaper-style) ===== */
.classifieds-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.classifieds-search { display: flex; gap: 0.5rem; flex: 1 1 320px; max-width: 480px; }
.type-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1rem; }
a.auction-chip { text-decoration: none; }

.classifieds-board { column-gap: 1.25rem; column-count: 1; }
@media (min-width: 576px) { .classifieds-board { column-count: 2; } }
@media (min-width: 992px) { .classifieds-board { column-count: 3; } }

.classified-ad {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #fff;
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    margin: 0 0 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}
.classified-ad:hover { box-shadow: var(--shadow-md); }
.classified-ad-photo {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 0.35rem;
    margin-bottom: 0.7rem;
    display: block;
}
.classified-ad-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}
/* Sits opposite the type badge; secondary to it, so it stays quiet. */
.classified-ad-posted {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--swa-text-muted);
    white-space: nowrap;
}
.classified-ad-title {
    font-family: var(--font-display);
    color: var(--swa-maroon);
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0.1rem 0 0.5rem;
}
.classified-ad-title a { color: inherit; text-decoration: none; }
.classified-ad-title a:hover { text-decoration: underline; }
.classified-ad-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--swa-border);
    padding-top: 0.45rem;
    margin-bottom: 0.55rem;
}
.classified-ad-loc { color: var(--swa-text-muted); font-size: 0.8rem; white-space: nowrap; }
.classified-ad-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--swa-text);
    white-space: pre-wrap;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.classified-ad-foot {
    display: flex;
    flex-wrap: wrap; /* long "City, ST" + "View ad" must not overflow narrow cards */
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px dashed var(--swa-border);
    padding-top: 0.5rem;
    font-size: 0.82rem;
}
.classified-ad-contact a { color: var(--swa-maroon); font-weight: 600; text-decoration: none; }
.classified-ad-contact a:hover { text-decoration: underline; }
.classified-ad-more { color: var(--swa-tan-deep); font-weight: 600; white-space: nowrap; text-decoration: none; }
.classified-ad-more:hover { color: var(--swa-maroon); }

/* Classifieds: location input + reveal-number button */
.classifieds-location { max-width: 220px; }
.btn-reveal-number {
    background: none;
    border: none;
    padding: 0;
    color: var(--swa-maroon);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.btn-reveal-number:hover { text-decoration: underline; }
.revealed-number {
    color: var(--swa-maroon);
    font-weight: 600;
    text-decoration: none;
    align-items: center;
}
.revealed-number:hover { text-decoration: underline; }
.revealed-contact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.6rem;
}

/* ===== Forms & FAQ page ===== */
.forms-card,
.help-card { box-shadow: var(--shadow-sm); }

.forms-card-title,
.help-card-title,
.submit-cta-title {
    font-family: var(--font-display);
    color: var(--swa-maroon);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0;
}
.forms-card-title { margin-bottom: 0.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--swa-border); }

.forms-list { display: flex; flex-direction: column; }

.form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--swa-border);
}
.form-row:last-child { border-bottom: none; padding-bottom: 0.25rem; }

.form-row-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: var(--swa-cream);
    color: var(--swa-maroon);
    border: 1px solid var(--swa-border);
}

.form-row-body { flex: 1 1 auto; min-width: 0; }
.form-row-title { font-weight: 600; color: var(--swa-text); }
.form-row-desc { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--swa-text-muted); }

.form-row-points {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--swa-text-muted);
}
.form-row-points li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: 0.25rem;
}
.form-row-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--swa-tan);
}

.form-row-action {
    flex: 0 0 auto;
    padding-top: 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}
.form-coming {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--swa-text-muted);
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
}

.submit-cta {
    background: linear-gradient(160deg, var(--swa-cream) 0%, #ede3d3 100%);
    border: 1px solid var(--swa-border);
    border-left: 4px solid var(--swa-olive);
    border-radius: 0.6rem;
    padding: 1.4rem 1.5rem;
}
.submit-cta-title { margin-bottom: 0.5rem; }
.submit-cta-text { font-size: 0.92rem; color: var(--swa-text-muted); margin-bottom: 1.1rem; }

.help-card-title { margin-bottom: 0.5rem; }
.help-contact { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; font-size: 0.9rem; margin: 0; }
.help-contact dt {
    font-weight: 600;
    color: var(--swa-text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: center;
}
.help-contact dd { margin: 0; }

.faq-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--swa-border);
}

/* ===== Cover cropper (admin auction image) ===== */
.cover-cropper { margin-top: 0.75rem; }
.cover-cropper-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--swa-text-muted);
    margin-bottom: 0.5rem;
}
.cc-stage {
    background: #000;
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    overflow: hidden;
    line-height: 0;
}
.cc-canvas {
    width: 100%;
    height: auto;
    display: block;
    cursor: move;
    touch-action: none;
}
.cc-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cc-controls .cc-zoom { flex: 1 1 auto; }
.cc-ico { color: var(--swa-text-muted); font-weight: 700; width: 1rem; text-align: center; }
.cc-hint { font-size: 0.76rem; color: var(--swa-text-muted); margin: 0.35rem 0 0; }

/* ===== Auction details: tall cover + inline image flyer ===== */
.auction-hero {
    background: var(--swa-cream);
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
}
.auction-hero img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 0.35rem;
}
.auction-flyer-figure { margin: 0; }
.auction-flyer-figure img {
    width: 100%;
    height: auto;
    border-radius: 0.35rem;
    border: 1px solid var(--swa-border);
    display: block;
}

/* Bootstrap's cyan alert-info clashes with the palette; restyle the empty-state
   and informational alerts in warm brand tones. */
.alert-info {
    --bs-alert-bg: var(--swa-cream);
    --bs-alert-border-color: var(--swa-border);
    --bs-alert-color: var(--swa-text);
    --bs-alert-link-color: var(--swa-maroon);
}
.alert-info h5 { color: var(--swa-maroon); }

/* ===== Online office forms (contracts / bids) ===== */
.terms-scroll {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    background: var(--swa-cream);
    padding: 1rem 1.25rem;
}
.terms-list { margin: 0; padding-left: 1.25rem; }
.terms-list li { margin-bottom: 0.6rem; font-size: 0.92rem; line-height: 1.55; }
.terms-list li:last-child { margin-bottom: 0; }

.form-rows-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--swa-text-muted);
}
.dyn-rows .dyn-add { margin-top: 0.25rem; }

/* The typed e-signature gets the display serif so it reads as a signature line */
.signature-input {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
}

/* Typed e-signature as shown to staff */
.signature-display {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--swa-text);
    display: inline-block;
    padding: 0 1.5rem 0.15rem 0.25rem;
}

/* Print: submission detail prints as a clean document */
@media print {
    .top-bar, .site-header, .announcement-banner, footer, .no-print { display: none !important; }
    main { background: #fff; }
    .card { border: 1px solid #999; break-inside: avoid; }
}

/* ===== Admin framing picker (hero + category cards) ===== */
.framing-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--swa-border);
    border-radius: 0.4rem;
    cursor: crosshair;
    background: #000;
}
.framing-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.framing-mark {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,0.55);
    pointer-events: none;
}

/* ===== Moderation review: the seller's photos, in their order ===== */
.review-cover { max-width: 480px; }
.review-photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.review-photo {
    margin: 0;
    width: 104px;
}
.review-photo img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid var(--swa-border, #ddd);
}
.review-photo figcaption {
    text-align: center;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}
.review-photo-cover {
    background: var(--swa-maroon);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}

/* Sub-heading inside a form section (e.g. the mailing-address block). */
.form-subsection-title {
    font-family: var(--font-display);
    color: var(--swa-maroon);
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

/* ===== Managed photo tiles (classified submit + equipment consignment) ===== */
.pm-tile { position: relative; }
.photo-preview .pm-tile img {
    width: 128px;
    height: 128px;
}
.pm-tile.pm-tile-error img { outline: 2px solid #b02a37; }
.pm-cover {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--swa-maroon);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    pointer-events: none;
}
.pm-bar {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    justify-content: space-between;
    gap: 2px;
}
.pm-btn {
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.pm-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.85); }
.pm-btn:disabled { opacity: 0.35; cursor: default; }
.pm-btn.pm-remove { background: rgba(176, 42, 55, 0.9); }
.pm-btn.pm-remove:hover { background: rgba(176, 42, 55, 1); }

/* Drag reorder + the mini "how your ad will look" card on the submit page */
.pm-tile { cursor: grab; }
.pm-ghost { opacity: 0.4; }
.ad-mini {
    width: 250px;
    background: #fff;
    border: 1px solid var(--swa-border);
    border-radius: 0.65rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ad-mini-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--swa-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-mini-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Only invite a click once there's a cover photo to reframe. */
.ad-mini-photo:has(img:not([hidden])) { cursor: crosshair; }
.ad-mini-photo span { color: var(--swa-text-muted); font-size: 0.85rem; }
.ad-mini-body { padding: 0.6rem 0.8rem 0.75rem; }
.ad-mini-title {
    font-family: var(--font-display);
    color: var(--swa-maroon);
    font-size: 1.02rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ad-mini-price { color: var(--swa-green-price); font-weight: 700; margin-top: 0.15rem; }

/* Tells buyers a sale has a gallery worth opening. */
.auction-photo-count {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.74rem;
}

/* ===== Auction featured-item gallery ===== */
.auction-carousel {
    position: relative;
    background: var(--swa-cream);
    border-radius: 0.5rem;
    overflow: hidden;
}
.auction-carousel .carousel-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain; /* lots are photographed at every shape; don't crop them */
    background: #14100f;
}
.auction-carousel .carousel-control-prev,
.auction-carousel .carousel-control-next { width: 12%; }
.auction-carousel .carousel-control-prev-icon,
.auction-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    padding: 1rem;
    background-size: 45%;
}
.auction-carousel-counter {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Scrolls sideways so a long gallery doesn't push the page down. */
.auction-carousel-rail {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.5rem 0.1rem;
    scrollbar-width: thin;
}
.rail-thumb {
    flex: 0 0 auto;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.35rem;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.rail-thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.25rem;
}
.rail-thumb.active { border-color: var(--swa-maroon); }
.rail-thumb:focus-visible { outline: 2px solid var(--swa-gold); outline-offset: 2px; }

.auction-gallery-caption {
    margin: 0.5rem 0 0;
    font-weight: 600;
    color: var(--swa-maroon);
    min-height: 1.4rem; /* holds its place when a photo has no caption */
}

/* Staff side: photo, caption field, and reorder/remove controls per item. */
.auction-gallery-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.gallery-admin-item {
    margin: 0;
    border: 1px solid var(--swa-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.gallery-admin-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}
.gallery-admin-item figcaption { padding: 0.5rem; }

/* Community support: a one-line credit, not a section of its own. */
.advocacy-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--swa-text-muted);
    text-align: center;
}
.advocacy-note img { height: 22px; width: auto; }
.advocacy-note strong { color: var(--swa-maroon); font-weight: 600; }

/* ===== Photo lightbox =====
   The gallery crops to a 4:3 card so the page keeps its shape, which means tall
   and panoramic photos lose their edges. This is where the whole picture lives:
   contained, never cropped, zoomable and pannable. */
.gallery-main { cursor: zoom-in; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;              /* above the sticky header and Bootstrap modals' backdrop */
    background: rgba(15, 12, 10, 0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;         /* the pointer handlers own gestures once open */
}
.lightbox[hidden] { display: none; }

.lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;        /* the point of the whole thing: nothing cut off */
    border-radius: 0.35rem;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform 0.18s ease;
    cursor: zoom-in;
}
.lightbox-img.is-zoomed { cursor: grab; transition: none; }
.lightbox-img.is-panning { cursor: grabbing; transition: none; }

.lightbox-btn {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 44px;               /* a comfortable touch target */
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible { background: rgba(0, 0, 0, 0.78); outline: 2px solid #fff; }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

.lightbox-status {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .lightbox-prev { left: 0.4rem; }
    .lightbox-next { right: 0.4rem; }
    .lightbox-img { max-width: 98vw; }
}

/* Someone who asked for less motion should not get the zoom easing. */
@media (prefers-reduced-motion: reduce) {
    .lightbox-img { transition: none; }
}

/* How the seller wants to be reached, on the buyer-facing contact card. Sits
   above the reveal button so it is read before the number rather than after. */
.contact-pref-note {
    font-size: .88rem;
    color: var(--swa-brown-light);
}

/* Sub-label inside a contact-preference checkbox card. */
.contact-pref-sub {
    display: block;
    font-size: .78rem;
    color: var(--swa-brown-light);
    margin-top: .15rem;
}