/* ==========================================================================
   Sterel brand
   --------------------------------------------------------------------------
   Warm terracotta on cream, deliberately unlike the blue every other
   classifieds portal uses. Terracotta carries the calls to action, clay
   deepens them, and the sand/cream family carries every surface.
   ========================================================================== */

/* Self-hosted so no visitor IP is sent to a third-party font CDN (GDPR). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/public/fonts/jakarta-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/public/fonts/jakarta-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand ramp */
    --brand-50: #fdf6ee;
    --brand-100: #f8e7d3;
    --brand-200: #efc9a3;
    --brand-300: #e3a771;
    --brand-400: #d9834b;
    --brand-500: #c4622d;
    --brand-600: #a94f22;
    --brand-700: #8f3f19;
    --brand-800: #6d2f12;

    --bg: #f5efe6;
    --surface: #fffaf4;
    --surface-strong: #ffffff;
    --line: #e2d5c2;
    --line-soft: #ece2d4;
    --text: #241d15;
    --muted: #736858;
    --accent: var(--brand-500);
    --accent-dark: var(--brand-700);
    --success: #e7f6eb;
    --success-text: #215634;
    --danger: #a63b31;
    --shadow: 0 20px 60px rgba(60, 38, 16, 0.08);

    /* Elevation scale — cards rest low and lift on hover. */
    --shadow-sm: 0 1px 2px rgba(60, 38, 16, 0.06), 0 2px 8px rgba(60, 38, 16, 0.04);
    --shadow-md: 0 4px 12px rgba(60, 38, 16, 0.08), 0 12px 28px rgba(60, 38, 16, 0.07);

    /* One radius scale, applied consistently. */
    --radius: 14px;
    --radius-sm: 10px;

    /* Plus Jakarta Sans is the brand face; the system stack is the fallback
       while the webfont loads, and if it fails to load at all. */
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(circle at top right, rgba(196, 98, 45, 0.16), transparent 28%),
        linear-gradient(180deg, #f8f2ea 0%, #f3ecdf 100%);
}

/* Visible keyboard focus everywhere — the theme previously relied on the
   browser default, which the custom backgrounds made hard to see. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body.page-listing .shell {
    max-width: none;
    padding: 0 0 40px;
}

body.page-default .shell {
    padding-bottom: 24px;
}

body.page-listing .page {
    gap: 0;
}

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

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

.shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.site-header,
.section-head,
.hero,
.listing-page {
    display: flex;
    gap: 24px;
}

.site-header,
.section-head {
    align-items: center;
    justify-content: space-between;
}

.site-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 24px;
    padding: 10px 22px;
    border: 0;
    border-bottom: 1px solid rgba(223, 207, 184, 0.72);
    border-radius: 0;
    background: rgba(255, 250, 244, 0.92);
    backdrop-filter: blur(12px);
}

.site-header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    min-height: 58px;
    margin: 0 auto;
    padding: 0;
}

.brand {
    display: inline-flex;
    gap: 14px;
    align-items: center;
}

.brand-corner {
    position: static;
    transform: none;
}

.brand-logo {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(60, 38, 16, 0.1);
    object-fit: cover;
}

.brand-name {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-auth-shortcuts {
    display: none;
}

.mobile-auth-link {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--accent-dark);
}

.mobile-auth-link svg {
    width: 22px;
    height: 22px;
}

.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(223, 207, 184, 0.9);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 -10px 24px rgba(60, 38, 16, 0.08);
}

.mobile-bottom-link {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 6px 2px 8px;
    color: var(--text);
    text-align: center;
}

.mobile-bottom-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.mobile-bottom-icon svg {
    width: 20px;
    height: 20px;
}

.mobile-bottom-link span:last-child {
    font-size: 0.58rem;
    line-height: 1;
}

.brand small,
.site-nav a,
.eyebrow,
.category-card p,
.listing-card p,
.location,
.description,
.detail-panel p {
    color: var(--muted);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h3,
h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.25;
}

h3 {
    font-size: 1.02rem;
    line-height: 1.3;
}

.eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The eyebrow is a brand signal, so it takes the accent rather than muted. */
.section-head .eyebrow,
.hero .eyebrow {
    color: var(--brand-600);
}

.muted {
    color: var(--muted);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    max-width: none;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    text-align: center;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.site-nav-link:hover {
    transform: none;
    border-color: rgba(196, 98, 45, 0.45);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: none;
}

.site-nav-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent;
    color: var(--accent-dark);
    flex-shrink: 0;
}

.site-nav-icon svg {
    width: 19px;
    height: 19px;
}

.site-nav-link span:last-child {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 12px 4px 28px;
    color: var(--muted);
}

.muted {
    color: var(--muted);
}

.page {
    display: grid;
    gap: 32px;
}

.sticky-search-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 28px;
}

.sticky-search-row {
    display: block;
}

.sticky-search-row.has-back-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
}

.sticky-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(223, 207, 184, 0.86);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.88);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sticky-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.search-back-button {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-dark);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-back-button:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.search-back-button svg {
    width: 21px;
    height: 21px;
}

@media (min-width: 901px) {
    .sticky-search-row.has-mobile-back-button {
        display: block;
    }

    .sticky-search-row.has-mobile-back-button .search-back-button {
        display: none;
    }
}

.search-autocomplete {
    position: relative;
}

.sticky-search input {
    min-width: 0;
    padding-left: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.split-search {
    grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr) auto minmax(0, 0.9fr) auto;
}

.split-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-left: 20px;
}

.split-search-field .search-autocomplete {
    flex: 1;
    min-width: 0;
}

.split-search-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.split-search input {
    min-width: 0;
    width: 100%;
    padding-left: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.split-search input:focus {
    outline: none;
    box-shadow: none;
}

.split-search-divider {
    align-self: center;
    width: 1px;
    height: 26px;
    background: rgba(60, 38, 16, 0.16);
}

.sticky-search input:focus {
    outline: none;
    box-shadow: none;
}

.sticky-search-submit {
    display: grid;
    place-items: center;
    width: 46px;
    min-width: 46px;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    padding: 0;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sticky-search-submit:hover {
    background: var(--accent-dark);
}

.sticky-search-submit svg {
    width: 18px;
    height: 18px;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(223, 207, 184, 0.96);
    border-radius: var(--radius);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 18px 36px rgba(60, 38, 16, 0.12);
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.search-suggestions.is-hidden {
    display: none;
}

.search-suggestions.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1), transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-suggestion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(223, 207, 184, 0.72);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.search-suggestion:last-child {
    border-bottom: 0;
}

.search-suggestion:hover,
.search-suggestion.is-active {
    background: rgba(244, 234, 223, 0.9);
}

.search-suggestion-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
    background: rgba(196, 98, 45, 0.14);
}

.search-suggestion-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.search-suggestion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.search-suggestion-label {
    min-width: 0;
    font-weight: 700;
    line-height: 1.2;
}

.search-suggestion-type {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
    background: rgba(196, 98, 45, 0.12);
}

.search-suggestion-meta {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.search-suggestion-intent {
    grid-template-columns: minmax(0, 1fr);
}

.hero {
    align-items: stretch;
    padding: 36px;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(246, 231, 208, 0.84));
    border: 1px solid rgba(223, 207, 184, 0.9);
    box-shadow: var(--shadow);
}

.hero > * {
    flex: 1;
}

.hero h1,
.section-head h1,
.section-head h2,
.empty-state h1,
.empty-state h2 {
    margin: 0;
    line-height: 1.05;
}

.hero h1 {
    margin-top: 10px;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    max-width: 10ch;
}

.hero p {
    font-size: 1.1rem;
    max-width: 56ch;
}

.hero-actions,
.form-actions,
.tag-row,
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-card,
.listing-card,
.category-card,
.detail-panel,
.listing-form,
.flash,
.error-box,
.empty-state {
    border-radius: var(--radius);
    background: var(--surface-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.hero-card {
    padding: 24px;
    align-self: center;
}

.hero-card ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

.grid {
    display: grid;
    gap: 20px;
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.search-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    justify-content: start;
}

.category-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.live-search-grid {
    transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-search-grid.is-fading {
    opacity: 0;
}

.live-search-grid.is-live {
    display: block;
    position: relative;
}

.live-search-grid.is-live .live-search-tile {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.live-search-tile {
    animation: liveSearchTileIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.live-search-tile.is-leaving {
    animation: liveSearchTileOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
    pointer-events: none;
}

@keyframes liveSearchTileIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes liveSearchTileOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

.live-search-tile.listing-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    min-height: 2.6em;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.3;
}

.live-search-empty {
    padding: 28px 0;
    color: var(--muted);
    text-align: center;
}

.listing-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.listing-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: var(--shadow-md);
}

.listing-card:has(a:focus-visible) {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.listing-reference {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 7px;
    background: rgba(255, 250, 244, 0.9);
    color: var(--accent-dark);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
}

.card-image {
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #efe4d5;
}

.card-favorite-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 250, 244, 0.92);
    color: var(--text);
    cursor: pointer;
}

.card-favorite-button svg {
    width: 18px;
    height: 18px;
}

.card-favorite-button svg path {
    fill: none;
    stroke: currentColor;
}

.card-favorite-button.is-active {
    color: var(--accent-dark);
}

.card-favorite-button.is-active svg path {
    fill: currentColor;
}

.card-image img,
.listing-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cards are left-aligned and bottom-anchored: the title clamps to a fixed two
   lines and the footer is pushed down, so every card in a row lines up. */
.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 14px 16px 16px;
    text-align: left;
}

.card-meta {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.listing-card h3 {
    display: block;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.3;
}

.listing-card h3 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: inherit;
}

.listing-card h3 a:hover {
    color: var(--accent-dark);
}

.card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: auto;
    padding-top: 8px;
}

.card-footer strong,
.card-footer span,
.card-footer time {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The price is the thing buyers scan for, so it gets the most weight. */
.card-footer strong {
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.card-footer span,
.card-footer time {
    color: var(--muted);
    font-size: 0.8rem;
}

.card-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-footer span::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: currentColor;
    opacity: 0.65;
    -webkit-mask: var(--pin-icon) center / contain no-repeat;
    mask: var(--pin-icon) center / contain no-repeat;
}

:root {
    --pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z'/%3E%3C/svg%3E");
}

.category-card,
.detail-panel,
.empty-state,
.listing-form {
    padding: 24px;
}

.rich-copy {
    display: grid;
    gap: 18px;
    line-height: 1.7;
}

.release-notes-list {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}

.audit-log-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.audit-log-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.audit-log-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.audit-log-source {
    padding: 4px 10px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-log-body {
    line-height: 1.5;
}

.release-notes-list code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(196, 98, 45, 0.1);
    font-size: 0.92em;
}

.category-card {
    --category-a: #ff9966;
    --category-b: #ff5e62;
    --category-c: #ffd86f;
    --category-label-height: 48px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--category-label-height);
    aspect-ratio: 1 / 1;
    min-height: 0;
    justify-items: center;
    align-content: stretch;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 20px;
    background: rgba(255, 252, 247, 0.92);
    box-shadow: 0 10px 30px rgba(60, 38, 16, 0.05);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.category-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 82px;
    align-self: stretch;
    justify-self: stretch;
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.96);
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.46), transparent 34%),
        radial-gradient(circle at 72% 75%, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(145deg, var(--category-a), var(--category-b) 58%, var(--category-c));
}

.category-icon::before {
    content: "";
    position: absolute;
    inset: 8% 10% auto;
    height: 28%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08));
    filter: blur(0.5px);
}

.category-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(24, 10, 6, 0.14) 100%);
    mix-blend-mode: soft-light;
}

.category-icon svg {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    stroke-width: 1.4;
    filter: drop-shadow(0 8px 12px rgba(92, 28, 10, 0.22));
}

.category-icon:has(.category-icon-image) {
    background: #f7f3ec;
}

.category-icon:has(.category-icon-image)::before,
.category-icon:has(.category-icon-image)::after {
    display: none;
}

.category-icon-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.category-icon-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.subcategory-panel {
    margin: -8px 0 24px;
}

.subcategory-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.subcategory-card {
    grid-template-rows: minmax(0, 1fr);
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196, 98, 45, 0.45);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 16px 34px rgba(60, 38, 16, 0.09);
}

.category-card-copy {
    display: grid;
    gap: 0;
    width: 100%;
    height: var(--category-label-height);
    min-height: var(--category-label-height);
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.category-page-head {
    display: block;
    margin: -6px 0 -10px;
    text-align: center;
}

.category-title-row {
    display: block;
}

.category-description {
    max-width: 640px;
    margin: 8px auto 0;
    color: var(--muted);
}

.category-page-head h1 {
    margin: 0;
    font-family: var(--category-title-font, inherit);
    font-weight: var(--category-title-weight, 700);
    letter-spacing: var(--category-title-spacing, 0);
    line-height: 1.1;
}

.category-page-head[data-category-slug="moda"] {
    --category-title-font: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
    --category-title-weight: 400;
    --category-title-spacing: 0.02em;
}

.category-page-head[data-category-slug="dla-dzieci"] {
    --category-title-font: "Comic Sans MS", "Comic Neue", "Marker Felt", "Bradley Hand", cursive;
    --category-title-weight: 700;
}

.category-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(108, 98, 86, 0.8);
}

.category-card strong {
    font-family: var(--category-title-font, inherit);
    font-size: 0.88rem;
    font-weight: var(--category-title-weight, 600);
    letter-spacing: var(--category-title-spacing, 0);
    line-height: 1.2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: center;
    min-height: 0;
    text-align: center;
    padding: 0 8px;
}

.category-card[data-category-slug="antyki-i-kolekcje"] { --category-a: #b993d6; --category-b: #8ca6db; --category-c: #f7d6ff; }
.category-card[data-category-slug="budowa-i-remont"] { --category-a: #f7971e; --category-b: #ff512f; --category-c: #ffd200; }
.category-card[data-category-slug="firma-i-przemysl"] { --category-a: #5b86e5; --category-b: #36d1dc; --category-c: #8fd3ff; }
.category-card[data-category-slug="motoryzacja"] { --category-a: #fc466b; --category-b: #3f5efb; --category-c: #7cf3ff; }
.category-card[data-category-slug="nieruchomosci"] { --category-a: #f857a6; --category-b: #ff5858; --category-c: #ffd194; }
.category-card[data-category-slug="praca"] { --category-a: #11998e; --category-b: #38ef7d; --category-c: #b8ffda; }
.category-card[data-category-slug="dom-i-ogrod"] { --category-a: #56ab2f; --category-b: #a8e063; --category-c: #f6ffb2; }
.category-card[data-category-slug="elektronika"] { --category-a: #396afc; --category-b: #2948ff; --category-c: #80d0ff; }
.category-card[data-category-slug="moda"] { --category-a: #ee0979; --category-b: #ff6a00; --category-c: #ffd38a; }
.category-card[data-category-slug="rolnictwo"] { --category-a: #3ca55c; --category-b: #b5ac49; --category-c: #efff9a; }
.category-card[data-category-slug="zwierzeta"] { --category-a: #ff758c; --category-b: #ff7eb3; --category-c: #ffd7e6; }
.category-card[data-category-slug="dla-dzieci"] { --category-a: #30cfd0; --category-b: #9f6bff; --category-c: #f7b8ff; }
.category-card[data-category-slug="sport-i-hobby"] { --category-a: #11998e; --category-b: #0575e6; --category-c: #9cecfb; }
.category-card[data-category-slug="muzyka-i-edukacja"] { --category-a: #7f00ff; --category-b: #e100ff; --category-c: #ffc3ff; }
.category-card[data-category-slug="zdrowie-i-uroda"] { --category-a: #ff5f6d; --category-b: #ffc371; --category-c: #ffe9bf; }
.category-card[data-category-slug="uslugi"] { --category-a: #00c6ff; --category-b: #0072ff; --category-c: #89f7fe; }
.category-card[data-category-slug="noclegi"] { --category-a: #654ea3; --category-b: #eaafc8; --category-c: #ffe3ef; }
.category-card[data-category-slug="wypozyczalnia"] { --category-a: #c33764; --category-b: #1d2671; --category-c: #86a8ff; }
.category-card[data-category-slug="oddam-za-darmo"] { --category-a: #f6d365; --category-b: #fda085; --category-c: #fff0c5; }

.category-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}

.section-head.compact {
    align-items: end;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.button:active {
    transform: translateY(1px);
}

.button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(196, 98, 45, 0.28);
}

.button.primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: 0 4px 14px rgba(196, 98, 45, 0.34);
}

.button.ghost {
    background: var(--surface);
    color: var(--text);
}

.button.ghost:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.button.danger {
    color: var(--danger);
}

.button.danger:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.button[disabled],
.button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.listing-page {
    align-items: start;
}

.listing-media,
.listing-main {
    flex: 1;
}

/* The detail column is far taller than the gallery, which used to leave a large
   blank area beside it. Pinning the gallery keeps the photo in view instead. */
@media (min-width: 901px) {
    .listing-page .listing-media {
        position: sticky;
        top: 96px;
        align-self: start;
    }

    /* The gallery reads better slightly wider than the detail column. */
    .listing-page .listing-media {
        flex: 1.15;
    }

    .listing-page .listing-main {
        flex: 1;
    }
}

/* Related content spans the full width beneath both columns, which is both a
   better use of the space and the usual place buyers look for it. */
.listing-related {
    display: grid;
    gap: 20px;
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 0 24px;
}

@media (max-width: 900px) {
    .listing-related {
        margin-top: 20px;
        padding: 0 16px;
    }
}

.listing-media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #eadfce;
    box-shadow: var(--shadow);
}

.gallery-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 7px;
    padding: 9px 12px;
    background: rgba(31, 27, 23, 0.66);
}

.gallery-thumb {
    padding: 0;
    border: 1px solid rgba(255, 250, 244, 0.2);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 250, 244, 0.08);
    opacity: 0.72;
    transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
    cursor: pointer;
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible,
.gallery-thumb.is-active {
    opacity: 1;
    border-color: rgba(255, 250, 244, 0.78);
}

.gallery-thumb:hover { transform: translateY(-1px); }

.gallery-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.listing-main {
    display: grid;
    gap: 20px;
    padding: 0 24px 24px;
}

.listing-page .detail-panel {
    border-radius: 0;
}

.listing-floating-actions {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.listing-floating-actions-right {
    display: flex;
    gap: 10px;
}

.listing-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: rgba(255, 250, 244, 0.94);
    color: var(--text);
    cursor: pointer;
}

.listing-action-button svg {
    width: 20px;
    height: 20px;
}

.listing-action-button.is-overlay {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #fff;
    mix-blend-mode: difference;
    filter: none;
    pointer-events: auto;
}

.listing-action-button.is-overlay svg {
    width: 40px;
    height: 40px;
    overflow: visible;
}

.listing-action-button.is-active {
    background: rgba(196, 98, 45, 0.16);
    color: var(--accent-dark);
}

.listing-action-button.is-overlay.is-active {
    background: transparent;
    color: #fff;
}

.listing-sticky-actions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1px;
    background: rgba(255, 250, 244, 0.96);
    box-shadow: 0 10px 28px rgba(60, 38, 16, 0.1);
    transform: translateY(-110%);
    opacity: 0;
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.listing-sticky-actions.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.listing-sticky-actions .listing-action-button {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    border-radius: 0;
    background: rgba(255, 250, 244, 0.98);
}

.listing-sticky-actions .listing-action-button span {
    white-space: nowrap;
}

.price {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.listing-detail-reference {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tag {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4eadf;
    border: 1px solid var(--line);
}

.parameter-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 0;
}

.parameter-list div {
    padding: 14px;
    background: #f9f3ea;
}

.parameter-list dt {
    margin-bottom: 6px;
    font-weight: 700;
}

.parameter-list dd {
    margin: 0;
    color: var(--muted);
}

.contact-list {
    margin: 0;
    padding-left: 18px;
}

.listing-summary {
    display: grid;
    gap: 14px;
}

.listing-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 0.92rem;
}

.listing-meta-row p {
    margin: 0;
}

/* Pin marker on the location line, matching the card treatment. */
.listing-meta-row .location:first-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--text);
}

.listing-meta-row .location:first-child::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background: var(--accent);
    -webkit-mask: var(--pin-icon) center / contain no-repeat;
    mask: var(--pin-icon) center / contain no-repeat;
}

.listing-form {
    display: grid;
    gap: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

label,
.checkbox {
    display: grid;
    gap: 8px;
}

label small {
    color: var(--muted);
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--text);
    background: #fffdfa;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover,
textarea:hover,
select:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
}

input[disabled],
textarea[disabled],
select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f6f1e9;
}

label > span {
    font-size: 0.88rem;
    font-weight: 600;
}

label small {
    font-size: 0.8rem;
    line-height: 1.4;
}

.checkbox {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
}

.checkbox input {
    width: auto;
}

.parameter-editor {
    display: grid;
    gap: 16px;
}

.parameter-editor-list {
    display: grid;
    gap: 12px;
}

.company-editor-list,
.companies-grid {
    display: grid;
    gap: 18px;
}

.category-editor-list,
.category-field-list {
    display: grid;
    gap: 18px;
}

.category-editor-card,
.category-field-card {
    border-radius: 24px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.category-editor-card {
    padding: 20px;
}

.category-field-card {
    padding: 16px;
}

.empty-inline-note {
    margin: 0;
    color: var(--muted);
}

.category-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.category-toggle-card {
    min-height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 252, 247, 0.92);
    box-shadow: 0 10px 30px rgba(60, 38, 16, 0.05);
}

.category-toggle-card strong {
    display: inline-block;
    margin-bottom: 6px;
}

.companies-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.company-editor-card,
.company-tile,
.company-profile-logo {
    border-radius: 24px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.company-editor-card {
    padding: 20px;
}

.company-editor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

.company-editor-logo-preview,
.company-tile-logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: #fffdfa;
    border: 1px solid var(--line);
}

.company-editor-logo-preview {
    width: 96px;
    height: 96px;
}

.company-editor-logo-preview img,
.company-tile-logo img,
.company-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-tile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 16px;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.company-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(196, 98, 45, 0.45);
    box-shadow: 0 16px 34px rgba(60, 38, 16, 0.09);
}

.company-tile-logo {
    margin: 0;
    width: 96px;
    height: 96px;
    min-height: 96px;
    padding: 10px;
}

.company-tile-body {
    display: grid;
    gap: 14px;
    padding: 0;
}

.company-tile-body h2,
.company-profile-main h2 {
    margin: 0;
}

.company-tile-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.company-profile {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.company-profile-logo {
    min-height: 160px;
    padding: 14px;
}

.company-tile-logo img {
    max-width: 72px;
    max-height: 72px;
}

.company-profile-logo img {
    max-width: 120px;
    max-height: 120px;
    margin: 0 auto;
}

.company-profile-main {
    display: grid;
    gap: 20px;
}

.existing-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 140px));
    gap: 12px;
}

.category-map-fields {
    display: grid;
    gap: 20px;
    margin: 0;
}

.listing-map {
    overflow: hidden;
    border: 1px solid var(--line);
    background: #eadfce;
}

.listing-map iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    border: 0;
}

.is-hidden {
    display: none;
}

.existing-image-card {
    position: relative;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fffdfa;
}

.existing-image-card.is-removing {
    opacity: 0.55;
}

.existing-image-card img {
    margin-top: 6px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

.image-delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(42, 33, 24, 0.82);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.image-delete-button:disabled {
    cursor: wait;
}

.image-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.image-drag-handle:active,
.existing-image-card.is-dragging .image-drag-handle {
    cursor: grabbing;
}

.existing-image-card.is-dragging {
    z-index: 3;
    opacity: 0.72;
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.image-cover-badge {
    position: absolute;
    right: 8px;
    bottom: 50px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.image-order-status {
    min-height: 1.4em;
    margin: -8px 0 8px;
    color: var(--muted);
    font-size: 0.86rem;
}

/* Compact action grid for each listing in the dashboard table. */
.listing-action-icons {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.listing-actions-cell {
    width: 160px;
}

.listing-row-actions {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: 5px;
    width: max-content;
}

.listing-row-actions .button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
}

.listing-row-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .listing-actions-cell {
        width: 100%;
    }

    .listing-row-actions {
        grid-template-columns: repeat(4, 40px);
        margin-inline: auto;
    }

    .listing-row-actions .button {
        width: 40px;
        min-width: 40px;
        min-height: 40px;
        height: 40px;
    }
}

.parameter-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
}

.flash,
.error-box {
    padding: 18px 20px;
}

.flash-success {
    background: var(--success);
    color: var(--success-text);
}

.field-hint {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: -8px 0 8px;
}

.field-hint-success {
    background: var(--success);
    color: var(--success-text);
}

.field-hint-error {
    background: #fff0ee;
    color: #7d251e;
}

.error-box {
    background: #fff0ee;
    color: #7d251e;
}

.empty-state {
    display: grid;
    gap: 10px;
    place-items: center;
    text-align: center;
    min-height: 240px;
}

.auth-wrap {
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 520px);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.admin-table small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-actions form {
    margin: 0;
}

.admin-table-row-link {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.admin-table-row-link:hover {
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

.category-row-link {
    color: inherit;
    text-decoration: none;
}

.category-row-link:hover {
    text-decoration: underline;
}

.tag.muted {
    background: transparent;
    color: var(--muted);
}

.danger-panel .section-head p {
    max-width: 56ch;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.category-combobox {
    position: relative;
}

.category-combobox-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid rgba(223, 207, 184, 0.96);
    border-radius: 16px;
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 18px 36px rgba(60, 38, 16, 0.12);
}

.category-combobox-list.is-hidden {
    display: none;
}

.category-combobox-option {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid rgba(223, 207, 184, 0.72);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.category-combobox-option:last-child {
    border-bottom: 0;
}

.category-combobox-option:hover,
.category-combobox-option.is-active {
    background: rgba(244, 234, 223, 0.9);
}

.category-combobox-empty {
    margin: 0;
    padding: 11px 14px;
    color: var(--muted);
    font-size: 0.9rem;
}

.listing-map-picker {
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #eadfce;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    margin-bottom: 12px;
    font-size: 0.88rem;
    color: var(--muted);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

/* ---------- Status badges ---------- */

.listing-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-badge.status-reserved {
    background: rgba(214, 158, 46, 0.18);
    color: #8a6116;
}

.status-badge.status-sold {
    background: rgba(180, 60, 45, 0.16);
    color: #93301f;
}

.status-badge.status-archived {
    background: rgba(90, 90, 90, 0.14);
    color: #555;
}

.card-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 250, 244, 0.94);
    color: var(--text);
    box-shadow: 0 4px 12px rgba(60, 38, 16, 0.16);
}

.card-image {
    position: relative;
}

.listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: 0.88rem;
}

.result-count {
    color: var(--muted);
    font-size: 0.92rem;
}

/* ---------- Contact reveal ---------- */

.contact-reveal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-reveal-button {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fffdfa;
    color: var(--accent-dark);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.contact-reveal-button:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.contact-reveal-value {
    font-weight: 600;
}

/* ---------- Inline message form ---------- */

.listing-message-panel .quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.button.small {
    padding: 6px 12px;
    font-size: 0.84rem;
}

.contact-visibility-panel {
    display: grid;
    gap: 16px;
    margin: 0;
}

/* ---------- Filters ---------- */

.listing-filters {
    margin-bottom: 18px;
}

.listing-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.listing-filters-form {
    display: grid;
    gap: 16px;
}

.listing-filters-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.listing-filters .checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.listing-filters .checkbox-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.listing-filters .checkbox-row span {
    font-size: 0.9rem;
    font-weight: 500;
}

.inline-select-form {
    margin: 0;
}

.inline-select-form select {
    min-width: 130px;
    padding: 8px 10px;
    font-size: 0.88rem;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 28px 0;
}

.pagination-link {
    min-width: 40px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdfa;
    color: var(--text);
    text-align: center;
    text-decoration: none;
}

.pagination-link:hover:not(.is-disabled):not(.is-current) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pagination-link.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}

.pagination-link.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--muted);
}

/* ---------- Unread badges ---------- */

.nav-unread-dot {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c4622d;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.site-nav-icon,
.mobile-bottom-icon {
    position: relative;
}

.unread-badge {
    align-self: center;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #c4622d;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.chat-message-time {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.76rem;
}

.chat-thread-card time {
    color: var(--muted);
    font-size: 0.74rem;
}

.chat-message-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* ---------- Reviews ---------- */

.star-rating {
    color: #f2b01e;
    letter-spacing: 1px;
}

.review-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-item {
    padding: 12px 0;
    border-top: 1px solid var(--border, #e5e5e5);
}

.review-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Report panel ---------- */

.report-panel summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--muted);
}

.report-panel summary:hover {
    color: var(--accent-dark);
}

.report-panel details[open] summary,
.report-panel[open] summary {
    margin-bottom: 12px;
    color: var(--text);
}

details.report-panel {
    margin-top: 16px;
}

.admin-table tr.is-resolved {
    opacity: 0.6;
}

/* ---------- Lightbox ---------- */

body.has-lightbox {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: rgba(20, 12, 4, 0.92);
}

.lightbox.is-hidden {
    display: none;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.lightbox-close,
.lightbox-nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

/* ---------- Seller profile ---------- */

.seller-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.seller-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.seller-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-dark);
    font-size: 1.6rem;
    font-weight: 700;
}

.seller-identity h1 {
    margin: 2px 0 4px;
}

.seller-link {
    color: var(--accent-dark);
    font-weight: 600;
}

.seller-link:hover {
    text-decoration: underline;
}

/* ---------- Notifications ---------- */

.notification-list,
.plain-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fffdfa;
}

.notification-item.is-unread {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent) 5%, #fffdfa);
}

.notification-type {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--muted);
}

.notification-type.type-message {
    background: #3f7fbf;
}

.notification-type.type-saved_search {
    background: var(--accent);
}

.notification-type.type-followed_seller {
    background: #4f9d69;
}

.notification-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.notification-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.notification-body time {
    color: var(--muted);
    font-size: 0.78rem;
}

.unread-dot {
    width: 9px;
    height: 9px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.plain-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

.plain-list li:last-child {
    border-bottom: 0;
}

/* ---------- Stats and analytics ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.stat-card {
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow-sm);
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.analytics-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ranked-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.ranked-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ranked-list a {
    color: var(--accent-dark);
}

.ranked-list a:hover {
    text-decoration: underline;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    overflow-x: auto;
    padding-top: 10px;
}

.bar-chart-column {
    display: flex;
    flex: 1;
    min-width: 46px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
}

.bar-chart-bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
}

.bar-chart-value {
    font-size: 0.8rem;
    font-weight: 700;
}

.bar-chart-label {
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* ---------- Bulk actions ---------- */

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.bulk-bar select {
    width: auto;
    min-width: 180px;
}

.bulk-bar [data-bulk-count] {
    font-weight: 600;
}

.checkbox-cell {
    width: 36px;
}

.checkbox-cell input {
    width: auto;
}

.row-action-forms {
    display: none;
}

.blocked-note {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow-md);
}

.cookie-banner p {
    margin: 0;
    max-width: 62ch;
    font-size: 0.92rem;
}

.cookie-banner a {
    color: var(--accent-dark);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-banner-actions form {
    margin: 0;
}

@media (max-width: 640px) {
    .listing-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pagination-link {
        min-width: 36px;
        padding: 8px 10px;
    }

    /* Keep the banner clear of the fixed bottom navigation. */
    .cookie-banner {
        bottom: 70px;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seller-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.listing-id-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.listing-search-actions {
    display: flex;
    gap: 8px;
}

.listing-search-empty {
    padding: 26px 12px !important;
    color: var(--muted);
    text-align: center !important;
}

.form-actions form {
    margin: 0;
}

.create-gate-panel {
    min-height: 320px;
}

.create-gate-state {
    min-height: 0;
    padding: 32px 24px;
}

.chat-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
}

.chat-sidebar,
.chat-main {
    display: grid;
    gap: 16px;
}

.chat-thread-list,
.chat-message-list {
    display: grid;
    gap: 12px;
}

.chat-thread-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    background: #fffdfa;
}

.chat-thread-card.is-active {
    border-color: rgba(196, 98, 45, 0.55);
    background: #fff7ef;
}

.chat-thread-card img {
    width: 72px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.chat-thread-copy {
    display: grid;
    gap: 4px;
}

.chat-thread-copy span,
.chat-thread-copy small {
    color: var(--muted);
}

.chat-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.chat-header h2,
.chat-message p {
    margin: 0;
}

.chat-message {
    max-width: min(560px, 100%);
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #fffdfa;
}

.chat-message.is-own {
    margin-left: auto;
    background: #fff3e7;
    border-color: rgba(196, 98, 45, 0.4);
}

.chat-message strong {
    display: block;
    margin-bottom: 6px;
}

.chat-compose {
    display: grid;
    gap: 12px;
}

@media (min-width: 901px) {
    .mobile-bottom-nav {
        display: none;
    }

    body.page-listing .shell {
        padding: 0;
    }

    body.page-listing .page {
        display: block;
    }

    body.page-listing .sticky-search-wrap {
        width: min(calc(100% - 48px), 1200px);
        margin-left: auto;
        margin-right: auto;
    }

    .listing-page {
        display: grid;
        grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
        gap: 32px;
        width: min(100%, 1320px);
        margin: 0 auto;
        padding: 32px 24px 48px;
        align-items: start;
    }

    .listing-media {
        position: sticky;
        top: 151px;
        min-height: 0;
        border: 0;
        background: #1f1b17;
        box-shadow: 0 24px 60px rgba(60, 38, 16, 0.16);
    }

    .listing-media > #listing-main-image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .gallery-strip {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 8px;
        padding: 10px;
        border-top: 1px solid rgba(255, 250, 244, 0.14);
        background: rgba(31, 27, 23, 0.92);
    }

    .gallery-thumb {
        border-color: rgba(255, 250, 244, 0.24);
        background: rgba(255, 250, 244, 0.08);
    }

    .listing-main {
        gap: 14px;
        padding: 0;
    }

    .listing-main > .section-head.compact {
        display: grid;
        gap: 12px;
        padding: 0 0 14px;
        border-bottom: 1px solid var(--line);
    }

    /* Grid children stretch by default; keep the action button at its own size. */
    .listing-main > .section-head.compact > .button {
        justify-self: start;
    }

    .listing-main h1 {
        margin-bottom: 0;
        font-size: clamp(2rem, 3vw, 3.2rem);
        line-height: 0.98;
    }

    .listing-detail-reference {
        margin-top: 10px;
        font-size: 0.76rem;
    }

    .listing-summary,
    .listing-page .detail-panel {
        border: 1px solid rgba(223, 207, 184, 0.88);
        background: rgba(255, 250, 244, 0.9);
        box-shadow: 0 14px 34px rgba(60, 38, 16, 0.06);
    }

    .listing-summary {
        padding: 20px;
    }

    .price {
        font-size: clamp(2rem, 3.2vw, 3rem);
        line-height: 1;
    }

    .listing-meta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
    }

    .listing-meta-row .location {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .listing-summary .description {
        margin: 2px 0 0;
        font-size: 1rem;
        line-height: 1.65;
    }

    .listing-summary .tag-row {
        margin-top: 2px;
    }

    .listing-page .detail-panel {
        padding: 18px;
    }

    .listing-page .detail-panel h2 {
        margin-bottom: 14px;
        font-size: 1.1rem;
    }

    .parameter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .parameter-list div {
        padding: 12px;
        border: 1px solid rgba(223, 207, 184, 0.7);
        background: rgba(255, 255, 255, 0.5);
    }

    .contact-list {
        display: grid;
        gap: 8px;
        padding-left: 0;
        list-style: none;
    }

    .listing-contact-panel .form-actions {
        margin-top: 14px;
    }

    .listing-action-button.is-overlay {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        background: rgba(17, 14, 11, 0.5);
        color: #fff;
        mix-blend-mode: normal;
        backdrop-filter: blur(8px);
    }

    .listing-action-button.is-overlay svg {
        width: 25px;
        height: 25px;
    }

    .listing-sticky-actions {
        display: none;
    }

    .category-card,
    .category-card-copy {
        border-radius: 0;
    }

    .sticky-search-wrap {
        top: 79px;
    }
}

@media (max-width: 900px) {
    body.page-default .shell {
        padding-bottom: 74px;
    }

    body.page-listing .sticky-search-wrap {
        display: none;
    }

    .site-header {
        display: none;
    }

    .hero,
    .listing-page,
    .section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid,
    .parameter-row,
    .chat-layout {
        grid-template-columns: 1fr;
    }

    .sticky-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .split-search {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "intent submit"
            "query submit"
            "location submit";
        border-radius: var(--radius);
    }

    .split-search-field-intent {
        grid-area: intent;
        padding: 8px 14px 7px 20px;
        border-bottom: 1px solid rgba(60, 38, 16, 0.12);
    }

    .split-search-field-query {
        grid-area: query;
        padding: 7px 14px;
        border-bottom: 1px solid rgba(60, 38, 16, 0.12);
    }

    .split-search-field-location {
        grid-area: location;
        padding: 7px 14px 8px 20px;
    }

    .split-search-divider {
        display: none;
    }

    .split-search .sticky-search-submit {
        grid-area: submit;
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .site-nav {
        max-width: 100%;
        gap: 0;
    }

    .company-profile {
        grid-template-columns: 1fr;
    }

    .company-tile {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .company-tile-logo {
        width: 72px;
        height: 72px;
        min-height: 72px;
        padding: 8px;
    }

    .company-tile-logo img {
        max-width: 56px;
        max-height: 56px;
    }

    .listing-main {
        padding: 0 18px 24px;
    }

}

@media (max-width: 640px) {
    .shell {
        padding: 0 0 74px;
    }

    .page {
        gap: 20px;
    }

    .hero,
    .section-head,
    .detail-panel,
    .listing-form,
    .empty-state,
    .flash,
    .error-box {
        margin: 0;
        border-radius: 0;
    }

    .category-page-head {
        margin: -10px 0 -14px;
    }

    .category-page-head h1 {
        line-height: 0.9;
    }

    .grid {
        gap: 0;
    }

    .detail-panel,
    .listing-form {
        padding: 14px;
    }

    .detail-panel .listing-form {
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .section-head.compact {
        gap: 10px;
    }

    .section-head h1,
    .section-head h2 {
        line-height: 1.1;
    }

    .section-head p,
    .detail-panel p {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .button {
        width: 100%;
        min-height: 42px;
        padding: 0 12px;
        text-align: center;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .form-grid {
        gap: 12px;
    }

    .listing-form {
        gap: 16px;
    }

    input,
    textarea,
    select {
        min-width: 0;
        padding: 11px 12px;
        border-radius: 10px;
        font-size: 16px;
    }

    .admin-table-wrap {
        overflow: visible;
    }

    .admin-table,
    .admin-table thead,
    .admin-table tbody,
    .admin-table tr,
    .admin-table th,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .admin-table td {
        padding: 5px 0;
        border-bottom: 0;
        text-align: center;
    }

    .admin-table td:first-child strong {
        display: block;
        line-height: 1.25;
    }

    .admin-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 6px;
    }

    .admin-actions .button {
        min-height: 38px;
        padding: 0 6px;
        font-size: 0.78rem;
    }

    .listing-id-lookup {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .company-editor-card,
    .category-editor-card,
    .category-field-card {
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
    }

    .company-editor-meta {
        display: grid;
        justify-items: center;
        gap: 10px;
    }

    .company-editor-logo-preview {
        width: 72px;
        height: 72px;
    }

    .cards,
    .search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .listing-card,
    .category-card {
        border-radius: 0;
        box-shadow: none;
    }

    .category-card {
        padding: 0;
    }

    /* Cards run edge-to-edge on mobile, but the text still needs breathing room. */
    .card-body {
        gap: 6px;
        padding: 10px 12px 14px;
    }

    .card-footer strong {
        font-size: 1.08rem;
    }

    body.page-listing .shell {
        padding-bottom: 24px;
    }

    .listing-floating-actions {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .listing-action-button.is-overlay {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .listing-sticky-actions .listing-action-button {
        min-height: 48px;
        padding: 0 10px;
    }

    .listing-sticky-actions .listing-action-button span {
        font-size: 0.78rem;
    }

    .category-icon {
        min-height: 42px;
    }

    .category-icon svg {
        width: 26px;
        height: 26px;
    }

    .card-meta,
    .card-footer {
        gap: 2px;
    }

    .card-footer {
        align-items: flex-start;
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 0;
    }

    .category-card {
        --category-label-height: 36px;
        grid-template-rows: minmax(0, 1fr) var(--category-label-height);
        min-height: 0;
    }

    .listing-card h3 {
        font-size: 0.92rem;
        line-height: 1.25;
        min-height: 2.5em;
    }

    .category-card p,
    .listing-card p,
    .card-meta {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .category-card strong {
        font-size: 0.62rem;
        line-height: 1.05;
    }
}

.flash-error {
    background: #fff0ee;
    color: #7d251e;
}

.maintenance-panel {
    width: min(680px, 100%);
    margin: 72px auto;
    padding: 36px;
    border: 1px solid rgba(44, 62, 80, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(28, 35, 45, 0.08);
}

.maintenance-panel h1 {
    margin: 8px 0 14px;
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1;
}

.maintenance-panel p {
    max-width: 58ch;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---------- Locale switcher ---------- */

.locale-bar {
    display: flex;
    justify-content: center;
    padding: 10px 16px 4px;
}

.language-switch select {
    width: auto;
    min-width: 130px;
    padding: 7px 12px;
    font-size: 0.86rem;
    background: var(--surface);
}

@media (max-width: 640px) {
    .locale-bar {
        padding-bottom: 76px;
    }
}

/* ==========================================================================
   Brand identity
   ========================================================================== */

/* ---------- Header lockup ---------- */

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(143, 63, 25, 0.22);
}

.brand-lockup {
    display: grid;
    gap: 1px;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.brand-tagline {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
}

@media (max-width: 900px) {
    .brand-lockup {
        display: none;
    }
}

/* ---------- Hero ---------- */

.brand-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 40px;
    border: 1px solid var(--brand-200);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 12%, rgba(196, 98, 45, 0.18), transparent 55%),
        linear-gradient(135deg, var(--brand-50), #fff8f0 60%, var(--brand-100));
    box-shadow: var(--shadow-sm);
}

.brand-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.05;
    max-width: 18ch;
}

.brand-hero p {
    margin: 0;
    max-width: 52ch;
    font-size: 1.03rem;
    color: var(--muted);
}

.brand-hero .hero-actions {
    margin-top: 22px;
}

.brand-hero-points {
    display: grid;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

.brand-hero-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
}

/* Brand-coloured checkmark instead of a default bullet. */
.brand-hero-points li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 999px;
    background:
        var(--brand-500)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 13px no-repeat;
}

.brand-hero-aside {
    padding: 22px;
    border: 1px solid var(--brand-200);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
}

.brand-hero-aside-title {
    margin: 0 0 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-600);
}

.brand-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-chip {
    padding: 8px 14px;
    border: 1px solid var(--brand-200);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-700);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.brand-chip:hover {
    transform: translateY(-1px);
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

@media (max-width: 900px) {
    .brand-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 20px;
        border-radius: 16px;
    }

    .brand-hero h1 {
        max-width: none;
    }
}

/* ---------- Category tiles ---------- */

.category-card {
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-md);
}

.category-card-copy {
    border-top: 1px solid var(--line-soft);
    background: #fff;
}

.category-card:hover .category-card-copy {
    background: var(--brand-50);
}

.category-card:hover strong {
    color: var(--brand-700);
}

/* A thin brand rule under each section heading ties the pages together. */
.section-head:not(.compact) > div > h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}

/* Section headings need breathing room before the grid that follows them. */
.section-head + .grid,
.section-head + .listing-filters,
.section-head compact + .grid {
    margin-top: 18px;
}

#categories .section-head {
    margin-bottom: 18px;
}

.brand-hero + section,
section + section {
    margin-top: 4px;
}

/* ==========================================================================
   Final mobile pass
   --------------------------------------------------------------------------
   These rules sit at the end of the stylesheet so every page, including
   admin tools and the AI listing creator, gets the same narrow-screen guard
   rails after component-specific desktop styling has been applied.
   ========================================================================== */

.ai-listing-create-page,
.ai-listing-create-page > *,
.page > *,
.detail-panel > *,
.listing-form > * {
    min-width: 0;
}

.ai-listing-create-page {
    display: grid;
    gap: 20px;
}

@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .shell,
    .page,
    .site-header-inner,
    .section-head,
    .hero,
    .listing-page,
    .detail-panel,
    .listing-form {
        min-width: 0;
        max-width: 100%;
    }

    .page > *,
    .section-head > *,
    .hero > *,
    .listing-main,
    .listing-media,
    .listing-related {
        min-width: 0;
        max-width: 100%;
    }

    .section-head h1,
    .section-head h2,
    .section-head p,
    .detail-panel h1,
    .detail-panel h2,
    .detail-panel h3,
    .detail-panel p,
    .listing-card h3,
    .chat-message p,
    .chat-thread-copy,
    .company-profile-main,
    code {
        overflow-wrap: anywhere;
    }

    .form-actions,
    .hero-actions,
    .admin-actions,
    .cookie-banner-actions {
        min-width: 0;
    }

    .form-actions > *,
    .hero-actions > *,
    .cookie-banner-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .listing-page {
        width: 100%;
    }

    .listing-media {
        min-height: 0;
        width: 100%;
        border-left: 0;
        border-right: 0;
    }

    .listing-media > #listing-main-image {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .gallery-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .gallery-thumb {
        min-width: 0;
    }

    .listing-floating-actions {
        left: 10px;
        right: 10px;
    }

    .listing-sticky-actions {
        top: auto;
        bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(110%);
    }

    .listing-sticky-actions.is-visible {
        transform: translateY(0);
    }

    .listing-sticky-actions .listing-action-button {
        min-height: 50px;
    }

    .listing-sticky-actions .listing-action-button span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-header {
        align-items: stretch;
        flex-direction: column;
    }

    .chat-header .button {
        width: 100%;
    }

    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-banner-actions form {
        flex: 1 1 140px;
        min-width: 0;
    }

    .cookie-banner-actions .button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .ai-listing-create-page {
        gap: 12px;
    }

    .ai-listing-create-page .section-head {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ai-listing-create-page .detail-panel {
        width: 100%;
    }

    .ai-listing-create-page input[type="file"] {
        padding: 10px;
        font-size: 0.9rem;
    }

    .ai-listing-create-page textarea {
        min-height: 120px;
    }

    .existing-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .existing-image-card {
        padding: 7px;
        border-radius: 12px;
    }

    .parameter-row {
        gap: 8px;
    }

    .listing-map iframe,
    .listing-map-picker {
        min-height: 240px;
    }

    .section-head.compact .form-actions {
        width: 100%;
    }

    .cards,
    .search-results-grid {
        gap: 10px;
    }

    .card-body {
        min-width: 0;
    }

    .category-card strong,
    .listing-card h3 a,
    .card-footer span,
    .card-footer time {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .admin-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-actions .button,
    .admin-actions select {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards,
    .search-results-grid {
        grid-template-columns: 1fr;
    }

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

    .mobile-bottom-link {
        min-height: 56px;
        font-size: 0.9rem;
    }

    .listing-sticky-actions .listing-action-button {
        padding-left: 6px;
        padding-right: 6px;
    }

    .listing-sticky-actions .listing-action-button span {
        font-size: 0.7rem;
    }
}

.ai-result-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.ai-result-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: var(--surface-muted, #f3f4f6);
}

.ai-result-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin-top: 18px;
}

.ai-result-summary p {
    margin: 0;
    overflow-wrap: anywhere;
}

.ai-generation-request {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-generation-request h2 {
    margin-top: 0;
}

.ai-generation-request p {
    overflow-wrap: anywhere;
}

.ai-image-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ai-image-preview {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-muted, #f8fafc);
}

.ai-image-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.ai-image-preview figcaption {
    padding: 6px 8px;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-generation-list {
    display: grid;
    gap: 12px;
}

.ai-generation-item {
    padding: 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    background: var(--surface-muted, #f8fafc);
}

.ai-generation-item h3,
.ai-generation-item p {
    margin-top: 0;
}

@media (max-width: 640px) {
    .ai-result-summary {
        grid-template-columns: 1fr;
    }

    .ai-listing-result-page .section-head.compact,
    .ai-generation-item .section-head.compact {
        align-items: stretch;
    }

    .ai-listing-result-page .section-head.compact .button,
    .ai-generation-item .section-head.compact .button {
        width: 100%;
    }
}

/* Listing detail refresh: gallery-led layout, stronger offer hierarchy, and a
   direct message CTA in the summary card. */
.listing-summary-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

#send-message {
    scroll-margin-top: 120px;
}

.listing-message-cta svg {
    width: 19px;
    height: 19px;
}

.listing-message-note {
    max-width: 34ch;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.listing-message-panel { padding: 0 !important; }
.listing-message-panel > summary {
    display: grid;
    gap: 4px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}
.listing-message-panel > summary::-webkit-details-marker { display: none; }
.listing-message-panel > summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 20px;
    color: var(--muted);
    font-size: 1.35rem;
}
.listing-message-panel { position: relative; }
.listing-message-panel[open] > summary::after { content: '−'; }
.listing-message-panel > summary strong { font-size: 1.15rem; }
.listing-message-content { padding: 0 22px 22px; }
.listing-message-content .listing-form { max-width: 680px; }

.listing-contact-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.listing-contact-heading h2 {
    margin-bottom: 0;
}

.listing-contact-intro {
    margin: 8px 0 0;
}

@media (min-width: 901px) {
    .listing-page {
        grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
        gap: 40px;
        width: min(100%, 1360px);
        padding-top: 36px;
    }

    .listing-media {
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(60, 38, 16, 0.14);
    }

    .listing-main > .section-head.compact {
        padding-bottom: 18px;
        border-bottom: 0;
    }

    .listing-main h1 {
        max-width: 24ch;
        font-size: clamp(1.9rem, 2.8vw, 2.65rem);
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .listing-summary,
    .listing-page .detail-panel {
        border-radius: 16px;
    }

    .listing-summary {
        padding: 26px;
    }

    .listing-summary .price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0 8px;
        max-width: 100%;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .listing-price-amount {
        font-size: clamp(2rem, 3.2vw, 2.65rem);
        font-weight: 750;
        line-height: 1.05;
        letter-spacing: -0.045em;
        white-space: nowrap;
    }

    .listing-price-type {
        color: var(--muted);
        font-size: 0.88rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .listing-price-vat {
        flex-basis: 100%;
        margin-top: 5px;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0;
    }

    .listing-summary .description {
        max-width: 58ch;
        color: #695d50;
    }

    .listing-page .detail-panel {
        padding: 24px;
    }

    .listing-page .listing-contact-panel {
        background: linear-gradient(145deg, #fffaf4 0%, #f9eee2 100%);
    }
}

@media (max-width: 900px) {
    .listing-main h1 {
        max-width: 24ch;
        font-size: clamp(1.65rem, 6vw, 2.35rem);
        line-height: 1.1;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
    }

    .listing-message-panel > summary { padding: 18px 16px; }
    .listing-message-content { padding: 0 16px 18px; }
}

@media (max-width: 900px) {
    .listing-summary-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .listing-summary-actions .button,
    .listing-contact-heading .button {
        width: 100%;
    }

    .listing-contact-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================================
   Listing detail — gallery and type scale
   --------------------------------------------------------------------------
   Sits last so it wins over the earlier layered listing rules. The gallery is
   a fixed 4:3 stage that letterboxes the photo over a blurred copy of itself
   (nothing gets cropped), with a light thumbnail rail underneath. The text
   scale is deliberately tighter: the price leads, the title stays readable
   even when long, and panel headings sit one clear step above body copy.
   ========================================================================== */

/* ---------- Gallery ---------- */

.listing-page .listing-media {
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.gallery-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1f1b17;
    outline-offset: -3px;
}

.listing-media .gallery-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    filter: blur(26px) brightness(0.62) saturate(1.1);
    pointer-events: none;
}

.listing-media #listing-main-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    cursor: zoom-in;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.92);
    color: var(--text);
    box-shadow: 0 4px 14px rgba(20, 12, 4, 0.22);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.18s ease, background-color 0.15s ease;
}

.gallery-nav:hover {
    background: #fff;
}

.gallery-nav svg {
    width: 22px;
    height: 22px;
}

.gallery-nav.is-prev {
    left: 14px;
}

.gallery-nav.is-next {
    right: 14px;
}

/* With a mouse the arrows appear on hover; touch screens always show them. */
@media (hover: hover) {
    .gallery-nav {
        opacity: 0;
    }

    .gallery-stage:hover .gallery-nav,
    .gallery-stage:focus-within .gallery-nav {
        opacity: 1;
    }
}

.gallery-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 14, 11, 0.62);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.listing-page .gallery-strip {
    display: flex;
    gap: 8px;
    padding: 10px 0 4px;
    overflow-x: auto;
    border-top: 0;
    background: transparent;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.listing-page .gallery-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #eadfce;
    opacity: 0.62;
    scroll-snap-align: center;
    transform: none;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.listing-page .gallery-thumb:hover,
.listing-page .gallery-thumb:focus-visible {
    opacity: 1;
    border-color: var(--line);
    transform: none;
}

.listing-page .gallery-thumb.is-active {
    opacity: 1;
    border-color: var(--accent);
}

.listing-page .gallery-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 7px;
}

/* ---------- Photo overlay actions (back / favourite / share) ---------- */

.listing-floating-actions {
    z-index: 3;
}

.listing-action-button.is-overlay,
.listing-action-button.is-overlay.is-active {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.9);
    color: var(--text);
    mix-blend-mode: normal;
    box-shadow: 0 4px 14px rgba(20, 12, 4, 0.2);
    backdrop-filter: blur(8px);
}

.listing-action-button.is-overlay:hover {
    background: #fff;
}

.listing-action-button.is-overlay svg {
    width: 22px;
    height: 22px;
}

.listing-action-button.is-overlay.is-active {
    color: var(--accent);
}

.listing-action-button.is-active svg path {
    fill: currentColor;
}

/* ---------- Title block ---------- */

.listing-main > .section-head.compact {
    gap: 12px;
    padding-bottom: 0;
    border-bottom: 0;
}

.listing-main .breadcrumbs {
    margin-bottom: 0;
    font-size: 0.82rem;
}

.listing-main h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.4rem, 4.6vw, 1.6rem);
    font-weight: 750;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.listing-badge-row {
    margin: 10px 0 0;
}

.listing-badge-row:not(:has(*)) {
    display: none;
}

.listing-badge-row .tag {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.listing-detail-reference {
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ---------- Summary card: price, meta, CTA ---------- */

.listing-summary,
.listing-page .detail-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow-sm);
}

.listing-page .listing-summary {
    gap: 12px;
    padding: 20px;
}

.listing-summary .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.listing-summary .price .tag {
    align-self: center;
    padding: 3px 10px;
    font-size: 0.78rem;
}

.listing-price-amount {
    color: var(--text);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.listing-price-type {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.listing-price-vat {
    flex-basis: 100%;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.listing-summary .listing-meta-row {
    gap: 4px 14px;
    font-size: 0.9rem;
}

.listing-summary .listing-stats {
    margin: 0;
    font-size: 0.82rem;
}

.listing-summary-actions {
    margin-top: 6px;
    padding-top: 16px;
}

.listing-message-note {
    font-size: 0.82rem;
}

/* ---------- Panels ---------- */

.listing-page .detail-panel {
    padding: 20px;
}

.listing-page .detail-panel h2,
.listing-message-panel > summary strong {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.listing-message-panel > summary strong {
    margin: 0;
}

.listing-page .listing-description-panel .description {
    max-width: 68ch;
    margin: 0;
    color: var(--text);
    font-size: 0.97rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.listing-description-panel .tag-row {
    gap: 8px;
    margin-top: 16px;
}

.listing-description-panel .tag {
    padding: 4px 11px;
    font-size: 0.82rem;
}

/* Parameters read as a spec sheet: label left, value right, hairline rows. */
.listing-page .parameter-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

.listing-page .parameter-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
}

.listing-page .parameter-list div:last-child {
    border-bottom: 0;
}

.listing-page .parameter-list dt {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.listing-page .parameter-list dd {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.listing-page .listing-contact-panel {
    background: var(--surface-strong);
}

.listing-page .contact-list {
    display: grid;
    gap: 8px;
    padding-left: 0;
    list-style: none;
    font-size: 0.95rem;
}

@media (min-width: 901px) {
    .listing-page {
        grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
        gap: 36px;
        width: min(100%, 1280px);
        padding: 28px 24px 24px;
    }

    /* Clear the sticky header (≈79px) plus the sticky search bar below it,
       so the pinned photo never slides underneath the search field. */
    .listing-page .listing-media {
        top: 140px;
    }

    /* Related offers line up with the gallery edge above them. */
    .listing-related {
        max-width: 1280px;
        margin-top: 16px;
    }

    .gallery-stage {
        border-radius: 16px;
        box-shadow: 0 18px 50px rgba(60, 38, 16, 0.14);
    }

    .listing-floating-actions {
        top: 14px;
        left: 14px;
        right: 14px;
    }

    .listing-main {
        gap: 16px;
    }

    .listing-main h1 {
        font-size: clamp(1.5rem, 1.9vw, 1.9rem);
    }

    .listing-price-amount {
        font-size: clamp(1.9rem, 2.4vw, 2.3rem);
    }

    .listing-page .listing-summary,
    .listing-page .detail-panel {
        padding: 22px 24px;
    }

}

@media (max-width: 900px) {
    .listing-page {
        gap: 16px;
    }

    .listing-page .gallery-strip {
        padding: 8px 16px 0;
    }

    .listing-page .gallery-thumb {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .gallery-nav {
        width: 38px;
        height: 38px;
    }

    .gallery-nav.is-prev {
        left: 10px;
    }

    .gallery-nav.is-next {
        right: 10px;
    }

    .listing-main {
        gap: 14px;
        padding: 0 16px 24px;
    }

    .listing-page .listing-summary,
    .listing-page .detail-panel {
        padding: 16px;
    }
}

/* ==========================================================================
   Condition and delivery
   ========================================================================== */

/* Carrier logo tile, shared by the listing page, seller form and admin. */
.carrier-logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-700);
    font-size: 0.78rem;
    font-weight: 800;
}

.carrier-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carrier-logo.is-large {
    width: 84px;
    height: 52px;
}

/* ---------- Listing summary: condition + cheapest delivery ---------- */

.listing-quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.listing-quick-facts li > a,
.listing-quick-facts li:not(:has(a)) {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--brand-50);
    font-size: 0.85rem;
}

.listing-quick-facts li > a:hover {
    border-color: var(--brand-300);
}

.listing-quick-facts span {
    color: var(--muted);
}

.listing-quick-facts strong {
    font-weight: 700;
}

/* ---------- Listing page: delivery panel ---------- */

#delivery {
    scroll-margin-top: 150px;
}

.listing-delivery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.listing-page .listing-delivery-head h2 {
    margin: 0;
}

.listing-delivery-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.listing-delivery-quantity span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.listing-delivery-quantity select {
    width: auto;
    min-width: 70px;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.delivery-option-list {
    display: grid;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.delivery-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

.delivery-option:last-child {
    border-bottom: 0;
}

.delivery-option-name {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.delivery-option-name strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.delivery-option-name small {
    color: var(--muted);
    font-size: 0.78rem;
}

.delivery-option-price {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.delivery-option.is-free .delivery-option-price {
    color: var(--success-text);
}

.delivery-option.is-unavailable {
    opacity: 0.5;
}

.delivery-option.is-unavailable .delivery-option-price {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: normal;
    text-align: right;
}

.listing-page .listing-delivery-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ---------- Seller form: delivery section ---------- */

.delivery-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.delivery-carrier-picker {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.delivery-carrier-picker legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

.delivery-carrier-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fffdfa;
}

.delivery-carrier-option:has(input[type="checkbox"]:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--brand-50);
}

.delivery-carrier-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.delivery-carrier-toggle input {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--accent);
}

.delivery-carrier-name {
    display: grid;
    min-width: 0;
}

.delivery-carrier-name strong {
    font-size: 0.92rem;
}

.delivery-carrier-name small {
    color: var(--muted);
    font-size: 0.78rem;
}

.delivery-carrier-option.is-unavailable .delivery-carrier-name small {
    color: var(--danger);
}

.delivery-carrier-price input {
    padding: 8px 10px;
    font-size: 0.9rem;
}

/* ---------- Admin: carrier editor ---------- */

.delivery-settings-help ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.9rem;
}

.carrier-editor-list {
    display: grid;
    gap: 16px;
}

.carrier-editor-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
}

.carrier-editor-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: end;
}

.carrier-editor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.carrier-bands {
    display: grid;
    gap: 8px;
}

.carrier-bands [data-band-list] {
    display: grid;
    gap: 8px;
}

.carrier-band-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) 40px;
    gap: 8px;
    align-items: center;
}

.carrier-band-row.is-head {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.carrier-band-row input,
.carrier-band-row select {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.carrier-band-row .button,
.carrier-bands > .button {
    width: auto;
    justify-self: start;
}

@media (max-width: 900px) {
    .delivery-package-grid,
    .carrier-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .delivery-carrier-option {
        grid-template-columns: minmax(0, 1fr);
    }

    .carrier-editor-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .carrier-editor-head > label:not(:first-of-type),
    .carrier-editor-head > .button {
        grid-column: 1 / -1;
    }

    .carrier-band-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carrier-band-row.is-head {
        display: none;
    }
}

/* ---------- Listing page: contact panel ---------- */

.contact-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.contact-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 1.1rem;
    font-weight: 800;
}

.contact-person > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.contact-person strong {
    font-size: 1rem;
}

.contact-person small {
    color: var(--muted);
    font-size: 0.82rem;
}

.listing-page .listing-contact-panel .contact-list:not(:has(li)) {
    display: none;
}

.contact-message-button {
    width: 100%;
    margin-top: 14px;
}

.contact-message-button svg {
    width: 19px;
    height: 19px;
}

/* ---------- Listing cards: condition + shipping ---------- */

.card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.card-facts span + span::before {
    content: "·";
    margin-right: 10px;
    color: var(--line);
}

.card-fact-shipping {
    color: var(--success-text);
    font-weight: 600;
}

.listing-contact-panel .contact-list a {
    color: var(--accent-dark);
    font-weight: 600;
}

.listing-contact-panel .contact-list a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Price drops, vacation mode, price offers, delivery defaults
   ========================================================================== */

.price-drop-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fdecea;
    color: #b3261e;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.3;
}

.listing-price-drop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.listing-price-drop s,
.card-price-row s {
    color: var(--muted);
}

.card-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.card-footer .card-price-row strong {
    display: inline;
}

.card-price-row s {
    font-size: 0.8rem;
}

/* The card footer puts a pin icon before every span; the price row is not a location. */
.card-footer .card-price-row::before,
.card-footer span.card-price-row::before {
    content: none;
}

.vacation-notice {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #f0d9a8;
    border-radius: var(--radius-sm);
    background: #fff8e6;
    color: #6b4d12;
    font-size: 0.9rem;
}

.vacation-notice p {
    margin: 0;
    color: inherit;
}

#vacation .vacation-notice {
    margin-bottom: 16px;
}

/* ---------- Offer form on the listing page ---------- */

.offer-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}

.offer-panel > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.offer-panel > summary::-webkit-details-marker {
    display: none;
}

.offer-panel > summary > span::after {
    content: "›";
    display: inline-block;
    margin-left: 8px;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.offer-panel[open] > summary > span::after {
    transform: rotate(90deg);
}

.offer-panel > :not(summary) {
    margin: 0 14px 14px;
}

.offer-form {
    display: grid;
    gap: 12px;
}

.offer-form label {
    display: grid;
    gap: 6px;
}

.offer-amount-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-amount-field input {
    max-width: 180px;
    font-size: 1.1rem;
    font-weight: 700;
}

.offer-form .button {
    justify-self: start;
}

.offer-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.offer-status-pending { background: #fff3d6; color: #7a5410; }
.offer-status-accepted { background: var(--success); color: var(--success-text); }
.offer-status-declined { background: #fdecea; color: #b3261e; }

/* ---------- Offers in the chat thread ---------- */

.chat-offers {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}

.chat-offers h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.chat-offers ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: #fff;
}

.chat-offer-amount {
    display: grid;
    flex: 1;
    min-width: 160px;
}

.chat-offer-amount strong {
    font-size: 1.1rem;
}

.chat-offer-amount small {
    color: var(--muted);
    font-size: 0.78rem;
}

.chat-offer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.chat-offer-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.checkbox-inline input {
    width: auto;
}

.chat-message.is-system {
    border-style: dashed;
    background: #fbf7f1;
}

.chat-message-kind {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.notification-type.type-price_drop {
    background: #b3261e;
}

/* ---------- Account settings: delivery defaults ---------- */

.delivery-defaults {
    display: grid;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

@media (max-width: 640px) {
    .chat-offer-actions,
    .chat-offer-actions form {
        width: 100%;
    }

    .chat-offer-actions .button {
        width: auto;
    }
}

.chat-offer.is-accepted {
    border-color: color-mix(in srgb, var(--success-text) 35%, var(--line));
}

.chat-offer.is-declined,
.chat-offer.is-withdrawn {
    opacity: 0.75;
}

.listing-message-cta {
    flex: none;
    white-space: nowrap;
}

/* The card footer's pin icon is meant for the location line only. */
.card-footer .tag {
    align-self: flex-start;
    padding: 2px 9px;
    font-size: 0.72rem;
}

.card-footer .tag::before {
    content: none;
}

/* ---------- Seller responsiveness ---------- */

.seller-responsiveness {
    display: grid;
    gap: 2px;
    margin: 0 0 10px;
    color: var(--success-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.seller-responsiveness span::before {
    content: "✓";
    margin-right: 6px;
}

/* ---------- Offers inbox ---------- */

.offers-section h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.offer-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.offer-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: #fffdfa;
}

.offer-row.is-declined,
.offer-row.is-withdrawn {
    opacity: 0.7;
}

.offer-row-image img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
}

.offer-row-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.offer-row-title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-row-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.offer-row-amount strong {
    font-size: 1.1rem;
}

.offer-row-amount small {
    color: var(--muted);
}

.offer-row-side {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.offer-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.offer-row-actions form {
    margin: 0;
}

@media (max-width: 640px) {
    .offer-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .offer-row-image img {
        width: 56px;
        height: 56px;
    }

    .offer-row-side {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .offer-row-actions .button {
        width: auto;
    }
}

/* ---------- Price benchmark ---------- */

.price-benchmark {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--line-soft);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}

.price-benchmark small {
    margin-left: 4px;
    color: var(--muted);
    font-weight: 500;
}

.price-benchmark.is-below {
    background: var(--success);
    color: var(--success-text);
}

.price-benchmark.is-above {
    background: #fff3d6;
    color: #7a5410;
}

/* ---------- Save search ---------- */

.save-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.save-search form {
    margin: 0;
}

.save-search-button svg {
    width: 18px;
    height: 18px;
}

.save-search small {
    font-size: 0.8rem;
}

/* ---------- Toasts ---------- */

.toast-region {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    display: grid;
    gap: 8px;
    width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: #241d15;
    color: #fff;
    box-shadow: var(--shadow-md);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-success { background: #1f5e36; }
.toast-error { background: #9b2c22; }

@media (max-width: 900px) {
    .toast-region {
        bottom: 84px;
    }
}

/* ---------- Active filter chips ---------- */

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 0.85rem;
    font-weight: 600;
}

.filter-chip:hover {
    background: var(--brand-100);
}

.filter-chip span[aria-hidden] {
    font-size: 1.05rem;
    line-height: 1;
}

/* ---------- Accessibility & navigation helpers ---------- */

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: #fff;
    font-weight: 700;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
}

#main-content:focus {
    outline: none;
}

.mobile-bottom-link span:last-child {
    font-size: 0.68rem;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--text);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 900px) {
    .back-to-top {
        bottom: 84px;
        right: 14px;
    }

    body.page-listing .back-to-top {
        bottom: 70px;
    }
}

/* ---------- Form helpers ---------- */

.char-counter {
    justify-self: end;
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.char-counter.is-near-limit {
    color: #9a6a00;
    font-weight: 600;
}

.upload-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.upload-previews:empty {
    display: none;
}

.upload-preview {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.upload-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.upload-preview figcaption {
    padding: 4px 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-preview.is-too-large {
    border-color: var(--danger);
}

.upload-preview.is-too-large figcaption {
    color: var(--danger);
    white-space: normal;
}

.empty-suggest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.empty-suggest-label {
    margin: 8px 0 0;
    font-size: 0.88rem;
}

.carrier-days {
    display: flex;
    align-items: center;
    gap: 6px;
}

.carrier-days input {
    width: 80px;
}

/* ==========================================================================
   Print: a clean one-column listing sheet
   ========================================================================== */

.print-only {
    display: none;
}

@media print {
    @page {
        margin: 14mm;
    }

    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
    }

    .site-header,
    .sticky-search-wrap,
    .mobile-bottom-nav,
    .site-footer,
    .locale-bar,
    .cookie-banner,
    .breadcrumbs,
    .listing-floating-actions,
    .listing-sticky-actions,
    .gallery-nav,
    .gallery-counter,
    .gallery-strip,
    .gallery-backdrop,
    .listing-summary-actions,
    .offer-panel,
    .listing-message-panel,
    .contact-message-button,
    .report-panel,
    .listing-related,
    .listing-map,
    .listing-page .button,
    .back-to-top,
    .toast-region,
    .skip-link,
    .flash {
        display: none !important;
    }

    .print-only {
        display: block;
        margin: 4px 0 0;
        color: #444;
        font-size: 9pt;
    }

    .listing-page {
        display: block !important;
        padding: 0 !important;
    }

    .listing-page .listing-media {
        position: static !important;
        max-width: 60%;
        margin-bottom: 12px;
    }

    .gallery-stage {
        background: none !important;
        box-shadow: none !important;
    }

    .listing-media #listing-main-image {
        object-fit: contain;
    }

    .listing-main {
        padding: 0 !important;
    }

    .listing-main > .section-head {
        display: block !important;
        text-align: left;
    }

    .listing-delivery-quantity {
        display: none !important;
    }

    .listing-summary,
    .listing-page .detail-panel {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}

/* ==========================================================================
   Engagement: compare, share menu, trust badges, favourites notes, RSS
   ========================================================================== */

.compare-toggle {
    justify-self: start;
    padding: 6px 12px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.compare-toggle:hover,
.compare-toggle.is-active {
    border-style: solid;
    border-color: var(--accent);
    color: var(--brand-700);
    background: var(--brand-50);
}

.compare-tray {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 46;
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-md);
    transform: translateX(-50%);
}

.compare-tray .button {
    width: auto;
}

@media (max-width: 900px) {
    .compare-tray {
        bottom: 80px;
    }

    body.page-listing .compare-tray {
        bottom: 66px;
    }
}

.compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
}

.compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.compare-table th,
.compare-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.compare-table tbody th {
    width: 150px;
    color: var(--muted);
    font-weight: 500;
}

.compare-table td.is-best {
    color: var(--success-text);
    font-weight: 700;
}

.compare-head {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.compare-head img {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
}

.compare-remove {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

.share-menu {
    position: absolute;
    z-index: 1500;
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    box-shadow: var(--shadow-md);
}

.share-menu a,
.share-menu button {
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

.share-menu a:hover,
.share-menu button:hover,
.share-menu a:focus-visible,
.share-menu button:focus-visible {
    background: var(--brand-50);
}

.trust-badges {
    display: grid;
    gap: 2px;
    margin: 0 0 8px;
    padding: 0;
    color: var(--muted);
    font-size: 0.84rem;
    list-style: none;
}

.trust-badges .is-verified {
    color: var(--success-text);
    font-weight: 600;
}

.trust-badges .is-verified::before {
    content: "✓ ";
}

.listing-watchers {
    color: var(--brand-700);
    font-weight: 600;
}

.price-alert-panel {
    margin-top: 10px;
}

.favourite-item {
    display: grid;
    gap: 8px;
    align-content: start;
}

.favourite-note {
    display: grid;
    gap: 6px;
}

.favourite-note textarea {
    padding: 8px 10px;
    font-size: 0.85rem;
}

.favourite-note .button {
    justify-self: start;
    width: auto;
}

.rss-link {
    padding: 2px 8px;
    border-radius: 4px;
    background: #f28a1e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.blocklist-panel summary {
    cursor: pointer;
}

.blocklist-panel textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
}

/* Floating buttons clear the cookie banner while it is on screen. */
body.has-cookie-banner .back-to-top,
body.has-cookie-banner .compare-tray {
    bottom: calc(var(--cookie-clearance, 0px) + 12px) !important;
}

.search-suggestion-label mark {
    padding: 0;
    background: transparent;
    color: var(--brand-700);
    font-weight: 800;
}

.dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dashboard-stats .stat-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.dashboard-stats .stat-card:hover {
    border-color: var(--brand-300);
    transform: translateY(-1px);
}

.dashboard-stats .stat-card.needs-attention {
    border-color: var(--accent);
    background: var(--brand-50);
}

.dashboard-stats .stat-card.needs-attention .stat-value {
    color: var(--brand-700);
}

/* ==========================================================================
   Q&A, price history, pins, bulk price
   ========================================================================== */

.owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.owner-actions form {
    margin: 0;
}

.card-status-badge.is-pinned {
    background: var(--brand-500);
    color: #fff;
}

.bulk-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bulk-price input {
    width: 90px;
}

.price-history summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.price-history ol {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
}

.price-history li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.price-history li span {
    min-width: 150px;
    color: var(--muted);
}

.question-form,
.answer-form {
    display: grid;
    gap: 8px;
}

.question-form .form-actions {
    align-items: center;
}

.question-form .button,
.answer-form .button {
    width: auto;
    justify-self: start;
}

.question-list {
    display: grid;
    gap: 14px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.question-item {
    display: grid;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.question-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.question-text,
.answer-text {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
}

.answer-text {
    margin-top: 6px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-50);
}

.listing-page .answer-pending {
    margin: 4px 0 0;
    font-size: 0.85rem;
}

.question-item form {
    margin: 0;
}

.question-delete {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

.autosave-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    border: 1px solid #f0d9a8;
    border-radius: var(--radius-sm);
    background: #fff8e6;
    color: #6b4d12;
    font-size: 0.9rem;
}

.autosave-banner .button {
    width: auto;
}

/* ---------- Chat read receipts ---------- */

.chat-receipt {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.chat-receipt.is-read {
    color: var(--success-text);
    font-weight: 600;
}

/* ---------- Sticky bar message CTA ---------- */

.listing-sticky-actions .listing-action-button.is-primary {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

/* ---------- Results grid / list toggle ---------- */

.results-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.view-toggle {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-strong);
}

.view-toggle button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.view-toggle button + button {
    border-left: 1px solid var(--line);
}

.view-toggle button[aria-pressed="true"] {
    background: var(--brand-50);
    color: var(--brand-700);
}

.view-toggle svg {
    width: 18px;
    height: 18px;
}

.grid.cards.is-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.grid.cards.is-list .listing-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
}

.grid.cards.is-list .card-image {
    height: 100%;
    aspect-ratio: auto;
    min-height: 140px;
}

.grid.cards.is-list .listing-card h3 {
    min-height: 0;
}

@media (max-width: 640px) {
    .grid.cards.is-list .listing-card {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .grid.cards.is-list .card-image {
        min-height: 110px;
    }
}

/* In list mode the favourite button sits over the text column, not the photo. */
.grid.cards.is-list .card-body {
    padding-right: 48px;
}

/* ==========================================================================
   Public profiles, business sellers, announcement, counter-offers, swaps
   ========================================================================== */

.site-announcement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 0.92rem;
    font-weight: 600;
}

.site-announcement.is-warning {
    border-color: #f0d9a8;
    background: #fff8e6;
    color: #6b4d12;
}

.site-announcement p {
    margin: 0;
}

.site-announcement button {
    flex: none;
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.business-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 4px 0 8px;
    font-size: 0.88rem;
}

.business-badge,
.invoice-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.business-badge {
    background: #e6eefb;
    color: #22457a;
}

.invoice-badge {
    background: var(--success);
    color: var(--success-text);
}

.seller-about p {
    margin: 0 0 10px;
    color: var(--text);
    line-height: 1.6;
}

.seller-about-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.9rem;
    list-style: none;
}

.offer-counter {
    color: var(--brand-700);
    font-weight: 600;
}

.offer-status-countered {
    background: #e6eefb;
    color: #22457a;
}

.offer-counter-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.offer-counter-form input {
    width: 110px;
    padding: 6px 8px;
    font-size: 0.88rem;
}

.listing-quick-facts li.is-swap {
    border-color: #c8dbf5;
    background: #eef4fc;
}

/* Product browsing: neutral surfaces, restrained terracotta calls to action. */
:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --line: #dce0e5;
    --line-soft: #e9ecf0;
    --text: #20252b;
    --muted: #606973;
    --accent: #a94f22;
    --accent-dark: #8f3f19;
    --shadow-sm: 0 1px 3px rgba(24, 32, 42, 0.04);
    --shadow-md: 0 6px 20px rgba(24, 32, 42, 0.08);
}

body { background: var(--bg); overflow-x: clip; }
.site-header { background: #fff; border-color: var(--line); box-shadow: none; }
.sticky-search-wrap { background: var(--bg); }
.sticky-search { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.sticky-search.split-search { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.45fr) auto; grid-template-rows: auto; grid-template-areas: none; }
.split-search-field-query, .split-search-field-location, .split-search .sticky-search-submit { grid-area: auto; }
.split-search-field { padding-left: 16px; }
.split-search-divider { background: var(--line); }
.sticky-search-submit { background: var(--accent); color: #fff; min-width: 48px; min-height: 48px; }
.sticky-search-submit:hover { background: var(--accent-dark); }
.site-nav .site-nav-sell { padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; }
.site-nav .site-nav-sell:hover { background: var(--accent-dark); color: #fff; }
.site-nav-sell .site-nav-icon { color: inherit; }
.listing-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-sm); }
.card-image { background: #edf0f3; aspect-ratio: 4 / 3; }
.card-footer strong { color: var(--text); font-size: 1.25rem; }
.cards, .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.view-home .page { gap: 28px; min-width: 0; }
.view-home .page > section { min-width: 0; }
.view-home #categories .section-head { text-align: left; }
.view-home #categories .section-head { margin-bottom: 12px; }
.view-home #categories h1 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.65rem); }
.view-home #categories .eyebrow { display: none; }
.view-home .category-grid:not(.is-live) { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.view-home .category-card { min-height: 0; height: auto; aspect-ratio: auto; grid-template-rows: 64px auto; padding: 10px 4px; border-radius: 12px; background: #fff; }
.view-home .category-icon { width: 64px; height: 64px; min-height: 0; margin: auto; aspect-ratio: 1; }
.view-home .category-icon::before, .view-home .category-icon::after { display: none; }
.view-home .category-icon svg { width: 44px; height: 44px; filter: none; }
.view-home .category-icon-picture { width: 64px; height: 64px; }
.view-home .category-icon-image { width: 100%; height: 100%; object-fit: contain; }
.view-home .category-card-copy { height: auto; min-height: 38px; padding: 6px 2px 0; border: 0; background: transparent; }
.view-home .category-card strong { font-size: 0.78rem; line-height: 1.3; padding: 0 2px; }
.view-home .section-head p { margin-top: 4px; }
.subcategory-card { grid-template-rows: minmax(0, 1fr) auto; }
.subcategory-card .category-card-copy { height: auto; min-height: 44px; padding: 8px; }
.marketplace-sell-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 28px; border: 1px solid var(--brand-200); border-radius: 14px; background: var(--brand-50); }
.marketplace-sell-banner h2 { margin: 4px 0; font-size: 1.5rem; }
.marketplace-sell-banner p { margin: 0; color: var(--muted); }
.marketplace-sell-banner .button { flex-shrink: 0; }
.listing-summary, .detail-panel { background: #fff; border-color: var(--line); }
.price-history { margin-top: 16px; }

@media (max-width: 640px) {
    .sticky-search.split-search { grid-template-columns: minmax(0, 1fr) 48px; gap: 0; }
    .split-search-field-query { grid-column: 1; grid-row: 1; }
    .split-search-field-location { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line-soft); }
    .split-search .split-search-divider { display: none; }
    .split-search .sticky-search-submit { grid-column: 2; grid-row: 1 / 3; align-self: stretch; height: auto; border-radius: 0 10px 10px 0; }
    .split-search input { min-height: 44px; font-size: 16px; }
    .view-home .category-grid:not(.is-live) { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 104px; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
    .view-home .category-card { grid-template-rows: 48px auto; padding: 8px 2px; scroll-snap-align: start; }
    .view-home .category-icon, .view-home .category-icon-picture { width: 48px; height: 48px; }
    .view-home .category-icon svg { width: 36px; height: 36px; }
    .view-home .category-card strong { font-size: 0.72rem; overflow-wrap: normal; }
    .cards, .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .card-body { padding: 10px; }
    .card-footer strong { font-size: 1.05rem; }
    .card-favorite-button { width: 40px; height: 40px; }
    .marketplace-sell-banner { align-items: flex-start; flex-direction: column; gap: 16px; padding: 20px; }
}