.facenimal-marketplace {
    box-sizing: border-box;
    color: #17212b;
    display: grid;
    gap: 12px;
    margin: 0 auto;
    max-width: 1240px;
    width: 100%;
}

.facenimal-marketplace-page {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: clip;
    width: 100%;
}

.facenimal-marketplace *,
.facenimal-marketplace *::before,
.facenimal-marketplace *::after {
    box-sizing: border-box;
}
 
.facenimal-marketplace-filters,
.facenimal-marketplace-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.facenimal-marketplace-panel {
    background: #d8eef0;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    display: grid;
    gap: 2px;
    padding: 7px 14px;
    border: none;
    margin: 0px;
}

.facenimal-marketplace-panel-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.facenimal-marketplace-panel-head :is(h1, h2) {
    color: #101828;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.facenimal-marketplace-header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.facenimal-marketplace-community-composer .facenimal-marketplace-header-actions {
    margin-left: auto;
}

.facenimal-marketplace-community-composer {
    align-self: start;
    top: 0;
}

.facenimal-marketplace-community-composer.is-stuck {
    left: 50%;
    max-width: 1240px;
    position: fixed;
    right: auto;
    top: 0;
    transform: translateX(-50%);
    width: min(100%, 1240px);
    z-index: 1000;
}

.facenimal-marketplace-community-composer.is-hidden-on-scroll {
    transform: translateX(-50%);
}

body.admin-bar .facenimal-marketplace-community-composer.is-stuck {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .facenimal-marketplace-community-composer.is-stuck {
        top: 46px;
    }
}

.facenimal-marketplace-new-listing-link {
    display: inline-flex;
}

.facenimal-marketplace-notifications-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #000 !important;
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    width: 42px;
}

.facenimal-marketplace-notifications-link:hover,
.facenimal-marketplace-notifications-link:focus {
    background: #ecfdf3;
    border-color: #8fd8a8;
    color: #006400 !important;
    text-decoration: none;
}

.facenimal-marketplace-notifications-link .facenimal-notification-bell-icon {
    fill: none;
    height: 30px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.3;
    width: 30px;
}

.facenimal-marketplace-notifications-link .facenimal-profile-notification-badge {
    align-items: center;
    background: #b42318;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 17px;
    min-width: 17px;
    padding: 0 4px;
    position: absolute;
    right: -4px;
    top: -3px;
}

.facenimal-marketplace-create-toggle,
.facenimal-marketplace-filter-toggle,
.facenimal-marketplace-submit,
.facenimal-marketplace-filters button {
    align-items: center;
    background: transparent;
    /*border: 1px solid #006400;*/
    border-radius: 999px;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    text-decoration: none;
    white-space: nowrap;
}

.facenimal-marketplace-submit {
    background: #006400;
    border: 1px solid #006400;
    color: #fff !important;
    margin-top: 12px;
}

.facenimal-marketplace-filters button {
    background: #006400;
    border: 1px solid #006400;
    color: #fff !important;
    min-height: 36px;
}

.facenimal-marketplace-filters button[type="button"] {
    background: #ecfdf3;
    border-color: #8fd8a8;
    color: #006400 !important;
}

.facenimal-marketplace-filters button.is-loading {
    opacity: .72;
}

.facenimal-marketplace-near-me-status {
    color: #667085;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    min-height: 16px;
}

.facenimal-marketplace-near-me-status.is-error {
    color: #b42318;
}

.facenimal-marketplace-boost-button {
    align-items: center;
    background: #ecfdf3;
    border: 1px solid #8fd8a8;
    border-radius: 999px;
    color: #006400;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;
}

/* The theme lays the content area out as a flex row, so <main> shrinks to its
   content and lies against the left edge; centring the flex item is what puts
   the card in the middle. Same trap as the legal pages. */
.facenimal-boost-page {
    margin: 0 auto;
    min-width: 0;
    width: 100%;
}

.facenimal-boost-checkout {
    background: #f8fafc;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 560px;
    /* Room at the bottom for the mobile menu, which sits over the page. */
    padding: 16px 16px 92px;
    width: 100%;
}

.facenimal-boost-bar {
    margin-bottom: 14px;
    padding: 10px 14px;
}

.facenimal-boost-bar .facenimal-community-composer-head {
    align-items: center;
    display: flex;
    gap: 12px;
}

.facenimal-boost-bar-title {
    color: var(--facenimal-theme-text, #101828);
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facenimal-boost-back {
    align-items: center;
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 999px;
    color: inherit;
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
}

/* The logo is 158px wide and the bar is one line: on a phone it ate the title down
   to "Boost check...". The back arrow and the title are what this bar is for, so the
   logo is the part that goes. */
@media (max-width: 520px) {
    .facenimal-boost-bar .facenimal-community-composer-logo-link {
        display: none;
    }
}

.facenimal-boost-back svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}

.facenimal-boost-checkout-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    margin: 0;
    padding: 18px;
}

.facenimal-boost-checkout-card h1 {
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.facenimal-boost-checkout-card dl {
    display: grid;
    gap: 8px;
    grid-template-columns: 110px minmax(0, 1fr);
    margin: 16px 0;
}

.facenimal-boost-checkout-card dt {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.facenimal-boost-checkout-card dd {
    color: #101828;
    font-size: 13px;
    font-weight: 900;
    margin: 0;
}

.facenimal-boost-checkout-plans {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.facenimal-boost-checkout-plan {
    align-items: center;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.facenimal-boost-checkout-plan:hover,
.facenimal-boost-checkout-plan:focus-within,
.facenimal-boost-checkout-plan:has(input:checked),
.facenimal-boost-checkout-plan.is-selected {
    background: #ecfdf3;
    border-color: #8fd8a8;
}

.facenimal-boost-checkout-plan span {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}

.facenimal-boost-checkout-plan strong,
.facenimal-boost-checkout-plan small {
    color: #101828;
    font-size: 13px;
    font-weight: 900;
}

.facenimal-boost-checkout-plan small {
    color: #006400;
    white-space: nowrap;
}

.facenimal-boost-result-card {
    text-align: center;
}

.facenimal-boost-result-icon {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    margin-bottom: 12px;
    width: 58px;
}

.facenimal-boost-result-icon svg {
    fill: none;
    height: 30px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 30px;
}

.facenimal-boost-result-card.is-success .facenimal-boost-result-icon {
    background: #ecfdf3;
    color: #006400;
}

.facenimal-boost-result-card.is-failed .facenimal-boost-result-icon {
    background: #fff1f0;
    color: #b42318;
}

.facenimal-boost-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.facenimal-boost-result-actions .facenimal-marketplace-submit {
    margin-top: 0;
}

.facenimal-marketplace-filter-toggle {
    display: none;
    height: 36px;
    padding: 0;
    width: 36px;
}

.facenimal-marketplace-filter-toggle svg {
    fill: none;
    height: 30px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 30px;
    color:#006400;
}

.facenimal-marketplace-filter-toggle .is-close,
.facenimal-marketplace.is-filters-open .facenimal-marketplace-filter-toggle .is-search {
    display: none;
}

.facenimal-marketplace.is-filters-open .facenimal-marketplace-filter-toggle .is-close {
    display: block;
}

.facenimal-marketplace-form {
    display: none;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
}

body.facenimal-marketplace-form-open .facenimal-marketplace-form,
.facenimal-marketplace.is-form-open .facenimal-marketplace-form,
.facenimal-marketplace-create.is-standalone .facenimal-marketplace-form {
    display: grid;
}

.facenimal-marketplace-form-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    min-width: 0;
}

.facenimal-marketplace-field {
    color: #344054;
    display: grid;
    font-size: 11px;
    font-weight: 800;
    gap: 5px;
    min-width: 0;
}

.facenimal-marketplace-field.is-wide {
    grid-column: 1 / -1;
}

.facenimal-marketplace-field input,
.facenimal-marketplace-field select,
.facenimal-marketplace-field textarea,
.facenimal-marketplace-filters input,
.facenimal-marketplace-filters select {
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: #101828;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 36px;
    outline: none;
    padding: 8px 10px;
    width: 100%;
}

/* The hidden file input must stay visually hidden: the generic field rule above
   (`.facenimal-marketplace-field input`) is more specific than the base
   `.facenimal-community-file-input` in posts.css and was stretching it to
   width:100%, pushing it off-screen and causing a horizontal page scroll. */
.facenimal-marketplace-field input.facenimal-community-file-input {
    border: 0;
    height: 1px;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.facenimal-marketplace-field textarea {
    line-height: 1.35;
    min-height: 86px;
    resize: vertical;
}

.facenimal-marketplace-category-picker {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 0;
}

.facenimal-marketplace-filters .facenimal-marketplace-category-picker {
    grid-template-columns: 1fr;
}

.facenimal-marketplace-field input:focus,
.facenimal-marketplace-field select:focus,
.facenimal-marketplace-field textarea:focus,
.facenimal-marketplace-filters input:focus,
.facenimal-marketplace-filters select:focus {
    border-color: #8fd8a8;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.08);
}

.facenimal-marketplace-photo-field .facenimal-community-photo-control {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.facenimal-marketplace-photo-field .facenimal-community-photo-preview {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    order: -1;
}

.facenimal-marketplace-photo-field .facenimal-community-photo-preview-grid {
    max-width: 100%;
    min-width: 0;
}

.facenimal-location-field {
    position: relative;
}

.facenimal-location-hint {
    color: #667085;
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 4px;
}

.facenimal-location-results {
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(16, 24, 40, .16);
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 5px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
}

.facenimal-location-result {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #17212b;
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
    text-align: left;
    width: 100%;
}

.facenimal-location-result:hover,
.facenimal-location-result:focus {
    background: #ecfdf3;
    color: #006400;
    outline: none;
}

.facenimal-location-result.is-empty {
    color: #667085;
    cursor: default;
    font-weight: 700;
}

.facenimal-location-result.is-empty:hover,
.facenimal-location-result.is-empty:focus {
    background: transparent;
    color: #667085;
}

.facenimal-marketplace-checkbox-field {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.facenimal-marketplace-checkbox-field input {
    width: auto;
}

.facenimal-marketplace-notice {
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
}

.facenimal-marketplace-notice.is-success {
    background: #ecfdf3;
    color: #006400;
}

.facenimal-marketplace-notice.is-error {
    background: #fff1f3;
    color: #b42318;
}

.facenimal-marketplace-filters {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 10px;
}

.facenimal-marketplace-content {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.facenimal-marketplace-sidebar {
    min-width: 0;
    position: sticky;
    top: 72px;
}

.facenimal-marketplace-filters .facenimal-marketplace-category-picker {
    grid-template-columns: 1fr;
}

.facenimal-marketplace-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facenimal-marketplace-card {
    min-width: 0;
    overflow: hidden;
}

.facenimal-marketplace-card.is-promoted {
    border-color: #8fd8a8;
}

.facenimal-marketplace-card-media {
    background: #f8fafc;
    display: block;
    min-height: 0;
    text-decoration: none;
}

.facenimal-marketplace-card-gallery {
    margin: 0;
}

.facenimal-marketplace-card-gallery .facenimal-community-gallery-cover img {
    aspect-ratio: 4 / 3;
}

.facenimal-marketplace-card-image {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.facenimal-marketplace-card-body {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 11px;
}

.facenimal-marketplace-card-head {
    align-items: start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}

.facenimal-marketplace-card h3 {
    color: #101828;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
    min-width: 0;
}

.facenimal-marketplace-card h3 a {
    color: inherit;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.facenimal-marketplace-card-head strong {
    color: #006400;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    max-width: 42%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facenimal-marketplace-card p,
.facenimal-marketplace-empty {
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.facenimal-marketplace-meta {
    color: #475467;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 800;
    gap: 6px;
}

.facenimal-marketplace-meta span,
.facenimal-marketplace-status {
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    padding: 4px 8px;
}

.facenimal-marketplace-status {
    color: #006400;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-self: start;
}

.facenimal-marketplace-sponsored-badge {
    align-items: center;
    background: #ecfdf3;
    border: 1px solid #8fd8a8;
    border-radius: 999px;
    color: #006400;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    justify-self: start;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
}

.facenimal-marketplace-card-actions {
    gap: 8px;
    margin-top: 2px;
    min-width: 0;
    padding: 8px 0 0;
}

.facenimal-marketplace-empty {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    grid-column: 1 / -1;
    padding: 14px;
}

.facenimal-marketplace-single {
    box-sizing: border-box;
    color: #17212b;
    margin: 0 auto;
    max-width: 1240px;
    /*padding: 12px;*/
    width: 100%;
}

.facenimal-marketplace-single *,
.facenimal-marketplace-single *::before,
.facenimal-marketplace-single *::after {
    box-sizing: border-box;
}

.facenimal-marketplace-single-shell {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 40%;
}

.facenimal-marketplace-back {
    align-items: center;
    background: rgba(46, 60, 87, 0.78);
    border: 1px solid rgba(16, 24, 40, 0.45);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    left: 10px;
    position: absolute;
    text-decoration: none;
    top: 10px;
    width: 40px;
    z-index: 4;
}

.facenimal-marketplace-back svg {
    display: block;
    fill: none;
    height: 24px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 24px;
}
.facenimal-marketplace-single-media {
    display: grid;
    gap: 8px;
    overflow: hidden;
    position: relative;
}

.facenimal-marketplace-single-media > img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    width: 100%;
}

.facenimal-marketplace-single-media .facenimal-community-post-gallery {
    margin: 0;
}

.facenimal-community-lightbox {
    touch-action: pan-y;
}

.facenimal-marketplace-single-placeholder {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    color: #667085;
    display: flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
}

.facenimal-marketplace-single-main {
    display: grid;
    gap: 14px;
    grid-column: 1;
    padding: 14px;
}

.facenimal-marketplace-social {
    display: grid;
    gap: 12px;
    grid-column: 1;
    padding: 14px;
    background:#f9f9f9;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.facenimal-marketplace-single-head {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.facenimal-marketplace-single-head h1 {
    color: #101828;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 8px;
}

.facenimal-marketplace-single-head > strong {
    color: #006400;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 900;
}

.facenimal-marketplace-single-description {
    color: #344054;
    font-size: 13px;
    line-height: 1.55;
}

.facenimal-marketplace-single-description p {
    margin: 0 0 10px;
}

.facenimal-marketplace-single-side {
    display: grid;
    gap: 12px;
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
}

.facenimal-marketplace-single-side .facenimal-marketplace-panel h2 {
    color: #101828;
    font-size: 14px;
    font-weight: 900;
    margin: 0;
}

.facenimal-marketplace-seller {
    align-items: center;
    color: #101828;
    display: flex;
    gap: 10px;
    text-decoration: none;
}

.facenimal-marketplace-seller-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
}

.facenimal-marketplace-seller span {
    display: grid;
    gap: 2px;
}

.facenimal-marketplace-seller strong {
    font-size: 13px;
    font-weight: 900;
}

.facenimal-marketplace-seller small,
.facenimal-marketplace-contact-list {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.facenimal-marketplace-single-side .facenimal-profile-trust-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    min-width: 0;
}

.facenimal-marketplace-single-side .facenimal-profile-trust-pill {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #344054;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    min-height: 22px;
    padding: 0 8px;
    white-space: nowrap;
}

.facenimal-marketplace-single-side .facenimal-profile-trust-pill.is-verified {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #006400;
}

.facenimal-marketplace-single-side .facenimal-profile-trust-pill.is-neutral {
    background: #f9fafb;
    color: #667085;
}

.facenimal-marketplace-contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.facenimal-marketplace-contact-list a {
    color: #006400;
    text-decoration: none;
}

.facenimal-marketplace-contact-action {
    align-items: center;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    color: #006400 !important;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.facenimal-marketplace-contact-action:hover,
.facenimal-marketplace-contact-action:focus {
    background: #ecfdf3;
    border-color: #8fd8a8;
    color: #006400 !important;
    text-decoration: none;
}

.facenimal-marketplace-contact-action svg {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 22px;
}

@media (max-width: 860px) {
    .facenimal-marketplace-new-listing-link {
        display: none;
    }

    .facenimal-marketplace-notifications-link {
        display: none;
    }

    .facenimal-marketplace-filter-toggle {
        display: inline-flex;
    }

    .facenimal-marketplace-content {
        grid-template-columns: 1fr;
    }

    .facenimal-marketplace-sidebar {
        display: none;
    }

    .facenimal-marketplace.is-filters-open .facenimal-marketplace-sidebar {
        display: block;
        left: 8px;
        max-height: calc(100dvh - 144px);
        overflow-y: auto;
        position: fixed;
        right: 8px;
        top: 64px;
        z-index: 999;
    }

    .facenimal-marketplace.is-filters-open .facenimal-marketplace-filters {
        box-shadow: 0 16px 36px rgba(16, 24, 40, 0.18);
    }

    body.admin-bar .facenimal-marketplace.is-filters-open .facenimal-marketplace-sidebar {
        top: 96px;
    }

    @media (max-width: 782px) {
        body.admin-bar .facenimal-marketplace.is-filters-open .facenimal-marketplace-sidebar {
            top: 110px;
        }
    }

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

    .facenimal-marketplace-single-shell {
        grid-template-columns: 1fr;
    }

    .facenimal-marketplace-single-main,
    .facenimal-marketplace-social,
    .facenimal-marketplace-single-side {
        grid-column: 1;
        grid-row: auto;
    }

}

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

    body.facenimal-marketplace-form-body #page,
    body.facenimal-marketplace-form-body .site.grid-container,
    body.facenimal-marketplace-form-body .site-content {
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        width: 100%;
    }

    body.facenimal-marketplace-form-body .site,
    body.facenimal-marketplace-form-body .site-content,
    body.facenimal-marketplace-form-body .content-area,
    body.facenimal-marketplace-form-body .site-main,
    body.facenimal-marketplace-form-body .inside-article,
    body.facenimal-marketplace-form-body .entry-content {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .facenimal-marketplace-form-template,
    .facenimal-marketplace-form-page,
    .facenimal-marketplace-create,
    .facenimal-marketplace-form,
    .facenimal-marketplace-form-grid,
    .facenimal-marketplace-field,
    .facenimal-marketplace-field input,
    .facenimal-marketplace-field select,
    .facenimal-marketplace-field textarea {
        max-width: 100%;
        min-width: 0;
    }

    .facenimal-marketplace-panel-head {
        flex-wrap: wrap;
        min-width: 0;
    }

    .facenimal-marketplace-panel-head :is(h1, h2),
    .facenimal-marketplace-create-toggle {
        min-width: 0;
    }

    .facenimal-marketplace-create-toggle {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .facenimal-marketplace-form-grid {
        grid-template-columns: 1fr;
    }

    .facenimal-marketplace-card-body {
        gap: 6px;
        padding: 8px;
    }

    .facenimal-marketplace-card-actions {
        flex-wrap: nowrap;
        gap: 2px;
        justify-content: space-between;
        padding-top: 6px;
    }

    .facenimal-marketplace-card-actions .facenimal-community-action-form,
    .facenimal-marketplace-card-actions .facenimal-community-reaction-button,
    .facenimal-marketplace-card-actions .facenimal-community-comment-count,
    .facenimal-marketplace-card-actions .facenimal-community-share-button,
    .facenimal-marketplace-card-actions .facenimal-community-save-button {
        flex: 0 1 auto;
        min-width: 0;
    }

    .facenimal-marketplace-card-actions .facenimal-community-reaction-button,
    .facenimal-marketplace-card-actions .facenimal-community-comment-count,
    .facenimal-marketplace-card-actions .facenimal-community-share-button,
    .facenimal-marketplace-card-actions .facenimal-community-save-button {
        gap: 1px;
        min-height: 28px;
        padding: 0 2px;
    }

    .facenimal-marketplace-card-actions .facenimal-community-reaction-current-icon,
    .facenimal-marketplace-card-actions .facenimal-community-reaction-current-icon svg,
    .facenimal-marketplace-card-actions .facenimal-community-comment-count svg,
    .facenimal-marketplace-card-actions .facenimal-community-share-button svg,
    .facenimal-marketplace-card-actions .facenimal-community-save-button svg {
        height: 23px;
        width: 23px;
    }

    .facenimal-marketplace-card-actions .facenimal-community-reaction-current-icon.is-emoji {
        font-size: 20px;
    }

    .facenimal-marketplace-card-actions img.emoji {
        height: 20px !important;
        width: 20px !important;
    }

    /* On 2-per-row cards the popover is wider than the card and the card's
       overflow:hidden clips it, so wrap the emoji onto rows instead. */
    .facenimal-marketplace-card-actions .facenimal-community-reaction-picker {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        left: 0;
        right: auto;
        max-width: calc(50vw - 34px);
        border-radius: 16px;
    }

    .facenimal-marketplace-card-actions .facenimal-community-reaction-choice {
        height: 30px;
        width: 30px;
    }

    .facenimal-marketplace-card-actions .facenimal-community-reaction-button [data-facenimal-reaction-count],
    .facenimal-marketplace-card-actions a.facenimal-community-reaction-button > span:not(.facenimal-community-reaction-current-icon),
    .facenimal-marketplace-card-actions .facenimal-community-comment-count span,
    .facenimal-marketplace-card-actions .facenimal-community-share-button span,
    .facenimal-marketplace-card-actions .facenimal-community-save-button span {
        font-size: 10px;
    }

    .facenimal-marketplace-panel-head {
        align-items: flex-start;
    }

    .facenimal-marketplace-header-actions {
        flex-wrap: wrap;
    }
}

/* The owner's own panel on a listing: promote it from where they are looking at
   it, instead of going back to the profile to find the button. */
.facenimal-marketplace-owner-panel .facenimal-marketplace-owner-note {
    /* Token first: a hard-coded grey here reads as light text on the dark
       theme's panel. The fallback is for the light theme, where no token is set. */
    color: var(--facenimal-theme-muted, #475467);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
}

.facenimal-marketplace-owner-panel .facenimal-boost-start-form {
    margin: 0;
}

.facenimal-marketplace-owner-panel .facenimal-community-submit {
    width: 100%;
}

.facenimal-boost-checkout-explainer {
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 10px;
    margin: 14px 0 4px;
    padding: 12px 14px;
}

.facenimal-boost-checkout-explainer p {
    color: var(--facenimal-theme-text, #101828);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.facenimal-boost-checkout-explainer ul {
    color: var(--facenimal-theme-text, #101828);
    font-size: 13px;
    line-height: 1.55;
    margin: 8px 0;
    padding-left: 18px;
}

/* Spacing by position, not by class: the text can now come from the admin, where
   there is no way to mark which paragraph is the disclaimer. */
.facenimal-boost-checkout-explainer > * + p {
    margin-top: 10px;
}

/* Invoice details on the boost checkout.
   Two columns where there is room, one on a phone; the address and the company
   name take the full width because a street rarely fits in half of one. */
.facenimal-boost-billing {
    border: 1px solid var(--facenimal-border, #e4e7ec);
    border-radius: 10px;
    margin: 18px 0;
    padding: 14px 16px 16px;
}

.facenimal-boost-billing legend {
    font-weight: 600;
    padding: 0 6px;
}

.facenimal-boost-billing-note {
    color: var(--facenimal-muted, #667085);
    font-size: 13px;
    margin: 0 0 12px;
}

.facenimal-boost-billing-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.facenimal-boost-billing-grid > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.facenimal-boost-billing-wide {
    grid-column: 1 / -1;
}

.facenimal-boost-billing-grid span {
    font-size: 13px;
    font-weight: 600;
}

.facenimal-boost-billing-grid em {
    color: #d92d20;
    font-style: normal;
}

.facenimal-boost-billing-grid input,
.facenimal-boost-billing-grid select {
    border: 1px solid var(--facenimal-border, #d0d5dd);
    border-radius: 8px;
    /* 16px, so iOS does not zoom the page when a field takes focus. */
    font-size: 16px;
    padding: 9px 10px;
    width: 100%;
}

.facenimal-boost-billing-toggle {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.facenimal-boost-billing-company {
    margin-top: 12px;
}

.facenimal-boost-billing-company[hidden] {
    display: none;
}

.facenimal-boost-billing-vies {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 6px;
}

.facenimal-boost-vies-check {
    background: transparent;
    border: 1px solid var(--facenimal-border, #d0d5dd);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    padding: 8px 12px;
}

.facenimal-boost-vies-check[disabled] {
    opacity: .6;
}

.facenimal-boost-vies-result {
    font-size: 13px;
}

.facenimal-boost-checkout-error {
    background: #fef3f2;
    border: 1px solid #fda29b;
    border-radius: 8px;
    color: #b42318;
    margin: 0 0 14px;
    padding: 10px 12px;
}

@media (max-width: 600px) {
    .facenimal-boost-billing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   The new-listing form.

   It was one flat two-column grid: every field a full-bleed dark band, labels
   at 11px glued 5px above their input, and toggles sitting in whichever cell
   came next — "show this phone" level with a field it had nothing to do with.
   Nothing grouped, nothing breathing, and square to the page edge.

   Now: a card with room in it, sections that say what they are for, and every
   toggle directly under the thing it governs. Colours come from the theme
   variables rather than being hardcoded, so the page is not a light form
   painted dark by an override.
   ========================================================================== */

.facenimal-listing-form {
    background: var(--facenimal-theme-panel, #fff);
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 18px;
    display: grid;
    gap: 0;
    overflow: hidden;
}

.facenimal-listing-section {
    border-top: 1px solid var(--facenimal-theme-border, #e4e7ec);
    display: grid;
    gap: 14px;
    padding: 22px 24px;
}

.facenimal-listing-section:first-child {
    border-top: 0;
}

.facenimal-listing-section-title {
    color: var(--facenimal-theme-text, #101828);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0;
}

.facenimal-listing-section-note {
    color: var(--facenimal-theme-muted, #667085);
    font-size: 13px;
    line-height: 1.5;
    margin: -6px 0 0;
    max-width: 62ch;
}

.facenimal-listing-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.facenimal-listing-grid > .is-wide,
.facenimal-listing-field-group.is-wide {
    grid-column: 1 / -1;
}

/* A field and the switch that governs it, kept together so neither can drift
   into a column beside something unrelated. */
.facenimal-listing-field-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* Labels, readable rather than shouted. The old 11px/800 said "form field";
   at 13px/600 with real space above the input it says what it is. */
.facenimal-listing-form .facenimal-marketplace-field {
    color: var(--facenimal-theme-muted, #475467);
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
}

.facenimal-listing-form .facenimal-marketplace-field > span {
    color: var(--facenimal-theme-text, #344054);
}

.facenimal-listing-form .facenimal-marketplace-field input,
.facenimal-listing-form .facenimal-marketplace-field select,
.facenimal-listing-form .facenimal-marketplace-field textarea {
    background: var(--facenimal-theme-panel-strong, #fff);
    border: 1px solid var(--facenimal-theme-border, #d0d5dd);
    border-radius: 12px;
    color: var(--facenimal-theme-text, #101828);
    /* 16px, or iOS zooms the page when a field takes focus. The old 12px was
       also simply hard to read. */
    font-size: 16px;
    font-weight: 500;
    min-height: 46px;
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.facenimal-listing-form .facenimal-marketplace-field textarea {
    line-height: 1.5;
    min-height: 132px;
    padding: 12px 14px;
}

.facenimal-listing-form .facenimal-marketplace-field input::placeholder,
.facenimal-listing-form .facenimal-marketplace-field textarea::placeholder {
    color: var(--facenimal-theme-muted, #98a2b3);
    font-weight: 400;
}

.facenimal-listing-form .facenimal-marketplace-field input:focus,
.facenimal-listing-form .facenimal-marketplace-field select:focus,
.facenimal-listing-form .facenimal-marketplace-field textarea:focus {
    border-color: var(--facenimal-theme-accent, #25B86D);
    box-shadow: 0 0 0 4px var(--facenimal-theme-accent-ring, rgba(37, 184, 109, .16));
}

/* The whole row is the target, not the 16px box. */
.facenimal-listing-toggle {
    align-items: center;
    background: var(--facenimal-theme-panel-soft, #f9fafb);
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 12px;
    color: var(--facenimal-theme-text, #344054);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
    line-height: 1.4;
    min-height: 46px;
    padding: 11px 14px;
    transition: border-color .15s ease, background .15s ease;
}

.facenimal-listing-toggle:hover {
    border-color: var(--facenimal-theme-accent-line, #84E3AA);
}

.facenimal-listing-toggle input[type="checkbox"] {
    accent-color: var(--facenimal-theme-accent-strong, #25B86D);
    flex: 0 0 auto;
    height: 18px;
    margin: 0;
    min-height: 0;
    width: 18px;
}

.facenimal-listing-form .facenimal-location-hint {
    color: var(--facenimal-theme-muted, #667085);
    font-size: 12px;
    font-weight: 400;
}

/* Photos lead, because choosing them is what a seller does first — and the
   whole well is the button, not a 40px icon sitting in the corner of it. */
.facenimal-listing-form .facenimal-marketplace-photo-field .facenimal-community-photo-control {
    align-items: stretch;
    display: grid;
    gap: 12px;
    padding: 0;
}

.facenimal-listing-photo-drop {
    align-items: center;
    background: var(--facenimal-theme-panel-soft, #f9fafb);
    border: 1px dashed var(--facenimal-theme-border, #d0d5dd);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 14px;
    min-height: 104px;
    padding: 20px 22px;
    transition: border-color .15s ease, background .15s ease;
    width: 100%;
}

.facenimal-listing-photo-drop:hover {
    background: var(--facenimal-theme-accent-soft, rgba(37, 184, 109, .06));
    border-color: var(--facenimal-theme-accent-line, #84E3AA);
}

/* The input is visually hidden, so it cannot show a focus ring of its own.
   Without this, reaching the control by keyboard looks like nothing happened. */
.facenimal-listing-form .facenimal-community-photo-control:focus-within .facenimal-listing-photo-drop {
    border-color: var(--facenimal-theme-accent, #25B86D);
    box-shadow: 0 0 0 4px var(--facenimal-theme-accent-ring, rgba(37, 184, 109, .16));
}

/* While something is being dragged over it. */
.facenimal-listing-form .facenimal-community-photo-control.is-dropping .facenimal-listing-photo-drop {
    background: var(--facenimal-theme-accent-soft, rgba(37, 184, 109, .1));
    border-color: var(--facenimal-theme-accent, #25B86D);
    border-style: solid;
}

.facenimal-listing-photo-icon {
    align-items: center;
    background: var(--facenimal-theme-panel-strong, #fff);
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.facenimal-listing-photo-icon svg {
    fill: none;
    height: 22px;
    stroke: var(--facenimal-theme-accent-strong, #25B86D);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    width: 22px;
}

.facenimal-listing-photo-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.facenimal-listing-photo-copy strong {
    color: var(--facenimal-theme-text, #101828);
    font-size: 15px;
    font-weight: 700;
}

.facenimal-listing-form .facenimal-community-photo-hint {
    color: var(--facenimal-theme-muted, #667085);
    font-size: 13px;
    font-weight: 400;
}

/* The preview sits beside the drop area, never inside it: a remove button
   inside a <label> would reopen the file picker on the way out. */
.facenimal-listing-form .facenimal-community-photo-preview {
    background: var(--facenimal-theme-panel-strong, #fff);
    border: 1px solid var(--facenimal-theme-border, #e4e7ec);
    border-radius: 14px;
    padding: 12px;
}

.facenimal-marketplace-form-page .facenimal-marketplace-submit {
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 18px;
    min-height: 52px;
    width: 100%;
}

@media (max-width: 720px) {
    .facenimal-listing-section {
        gap: 12px;
        padding: 18px 16px;
    }

    .facenimal-listing-grid {
        gap: 14px;
        grid-template-columns: minmax(0, 1fr);
    }

    .facenimal-listing-form {
        border-radius: 14px;
    }
}

/* The active theme carries a blanket `select { … !important }` — light pill,
   dark-green text, its own border radius — which lands on every dropdown in
   the plugin and makes two fields in this form look like they belong to a
   different site. !important is a last resort and this is one: there is no
   winning against an !important without one, and the alternative is a form
   that is half ours. Scoped to this form, so nothing else is affected. */
.facenimal-listing-form .facenimal-marketplace-field select,
.facenimal-listing-form .facenimal-marketplace-category-picker select {
    background: var(--facenimal-theme-panel-strong, #fff) !important;
    border: 1px solid var(--facenimal-theme-border, #d0d5dd) !important;
    border-radius: 12px !important;
    color: var(--facenimal-theme-text, #101828) !important;
    font-weight: 500 !important;
    min-height: 46px;
    padding: 12px 14px !important;
}

.facenimal-listing-form .facenimal-marketplace-field select:focus,
.facenimal-listing-form .facenimal-marketplace-category-picker select:focus {
    border-color: var(--facenimal-theme-accent, #25B86D) !important;
    box-shadow: 0 0 0 4px var(--facenimal-theme-accent-ring, rgba(37, 184, 109, .16));
}