/* ==========================================================================
   MARKETPLACE SHELL — the /naturalgoods page furniture
   ==========================================================================
   Miti's rules, copied from miti-exchange-2027/resources/css/layout.css —
   the sheet Miti's app.css ACTUALLY IMPORTS. See the note in carousel.css:
   layout-2.css is a variant copy imported by nothing, and taking rules from
   it left this page half unstyled.

   Covers .main-mid, .banner-tab__*, .banner-tabs--standalone, .spec-tab-nav*,
   .spec-section-header*, .mkt-search-btn*, .mkt-overview__*, .mkt-cat-*,
   .mkt-about* and .mkt-tabs__empty.

   GEOMETRY IS LITERAL, COLOUR IS NOT — the same rule carousel.css and
   directory.css follow, for the same reason.

   --theme-text-primary / --theme-text-secondary / --theme-border are Miti
   theme aliases pointing at --color-surface-900 / -500 / -200. Resolved to
   those, which this site defines with its own values.

   FOUR NAMES ARE LEFT UNRESOLVED ON PURPOSE: --color-text-body,
   --color-text-heading, --color-text-muted and --color-primary-600 are not
   defined ANYWHERE on Miti either — checked its whole css directory. Those
   declarations are dead on Miti and dead here, which is the same rendering.
   Inventing values would make this page differ from the benchmark.
   ========================================================================== */

.banner-tab__back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-700);
    background: var(--color-white);
    border: none;
    border-radius: 62.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background 150ms ease, color 150ms ease;
}

.banner-tab__back:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
}

.banner-tab__title {
    margin: 0;
    text-align: center;
    line-height: 0;
}

.banner-tab__title-img {
    max-width: 100%;
    height: auto;
    max-height: 4rem;
}

.banner-tab__title-img--dark { display: none; }

.banner-tab__title-img--light { display: inline; }

[data-theme="dark"] .banner-tab__title-img--light { display: none; }

[data-theme="dark"] .banner-tab__title-img--dark { display: inline; }

.banner-tab__prefix {
    color: var(--color-brand-600);
}

.banner-tab__keyword {
    color: var(--color-accent-800);
}

.banner-tabs--standalone .banner-tab--has-layout {
    overflow: visible;
}

.banner-tabs--standalone .banner-tab__layout {
    width: 100%;
    align-items: center;
    text-align: center;
}

.banner-tabs--standalone .banner-tab__title,
.banner-tabs--standalone .banner-tab__section-head,
.banner-tabs--standalone .banner-tab__intro,
.banner-tabs--standalone .banner-tab__desc {
    text-align: center;
}

.banner-tabs--standalone .banner-tab__intro,
.banner-tabs--standalone .banner-tab__desc {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.banner-tabs--standalone .banner-tab__inner-tabs,
.banner-tabs--standalone .banner-tab__cta-row,
.banner-tabs--standalone .banner-tab__view-all-row {
    justify-content: center;
    align-self: center;
}

.banner-tabs--standalone .banner-tab__sell-content {
    justify-content: center;
}

.shell--marketplace .banner-tab__banner-img {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.banner-tab__layout {
    display: flex;
    width: 70%;
    flex-direction: column;
    align-items: stretch;
    padding: 0 1rem;
    overflow-y: visible;
    position: relative;
    z-index: 2;
}

.banner-tab__banner-img {
    position: fixed;
    bottom: 0;
    left: 0;
    transform: none;
    z-index: -1;
    pointer-events: none;
}

.banner-tab__banner-img img {

    width: 15rem;
    object-fit: contain;
    object-position: bottom right;
    display: block;
}

.banner-tab--buy-focus .banner-tab__banner-img,
.banner-tab--sell-focus .banner-tab__banner-img {
    position: fixed;
    bottom: 0;
    left: 0;
     transform: none;
}

.banner-tab__title {
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.banner-tabs--standalone .banner-tab__title {
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.banner-tabs--standalone .banner-tab__title-img {
    display: block;
    height: 5rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.banner-tabs--standalone .banner-tab__title-img--light {
    display: block;
}

.banner-tabs--standalone .banner-tab__title-img--dark {
    display: none;
}

[data-theme="dark"] .banner-tabs--standalone .banner-tab__title-img--light {
    display: none;
}

[data-theme="dark"] .banner-tabs--standalone .banner-tab__title-img--dark {
    display: block;
}

.banner-tabs--standalone .mkt-tabs__nav {
    justify-content: center;
}

.banner-tabs--standalone .marketplace-section__title {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.banner-tab__section-head {
    font-family: 'Lobster', cursive;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 0.75;
    color: var(--color-surface-900);
    margin: 0 0 1rem;
}

.banner-tab__sell-row .banner-tab__section-head {
    margin-bottom: 0;
}

.banner-tab__view-all-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

[data-theme="dark"] .banner-tab__view-all-row {
    background: rgba(0, 0, 0, 0.35);
}

.banner-tab__view-all-hint {
    font-size: 0.875rem;
    color: var(--color-surface-900);
    font-style: italic;
    margin-left: auto; /* Automatically pushes the element to the far right */
    padding: 0 0.75rem;
}

.banner-tab__divider {
    border: none;
    border-top: 1px solid var(--color-surface-200);
    margin: 0.5rem 0;
}

.banner-tab__sell-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

[data-theme="dark"] .banner-tab__sell-row {
    background: rgba(0, 0, 0, 0.35);
}

.banner-tab__sell-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.banner-tab__sell-row .banner-tab__desc {
    margin: 0;
    flex: 1;
    color: var(--color-surface-900);
}

.banner-tab__desc {
    font-size: 0.875rem;
    color: var(--color-surface-700);
    line-height: 1.6;
    margin: 0 0 1rem;
    width: 60%;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.banner-tab__intro-img {
    display: block;
    width: auto;
    height: calc(100vh - 21rem);
    align-self: flex-start;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.banner-tab__intro {
    font-size: 0.875rem;
    color: var(--color-surface-500);
    line-height: 1.7;
    margin: 0;
    padding-right: 0.75rem;
}

.banner-tab__cta-row {
    display: inline-flex;
    align-self: flex-start;
    border-radius: 0.375rem;
    overflow: hidden;
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.banner-tab__cta {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: filter 150ms ease;
}

.banner-tab__cta:hover {
    filter: brightness(1.08);
}

.banner-tab__cta--buy {
    background: var(--color-brand-600, #16a34a);
}

.banner-tab__cta--sell {
    background: #6b4423;
}

.banner-tab__grid-wrap {
    padding: 0.75rem;
}

.banner-tab__inner-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.banner-tab__inner-tab {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 62.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-surface-900);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.banner-tab__inner-tab:hover {
    background: rgba(255, 255, 255, 0.35);
}

.banner-tab__inner-tab--active {
    background: var(--color-primary-600);
    color: #fff;
    border-color: var(--color-primary-600);
}

.banner-tab__micro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    align-content: start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.banner-tab__micro-grid::-webkit-scrollbar {
    width: 0.375rem;
}

.banner-tab__micro-grid::-webkit-scrollbar-track {
    background: transparent;
}

.banner-tab__micro-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 1rem;
}

.banner-tab__micro-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.42);
}

.banner-tab__empty {
    font-size: 0.875rem;
    color: var(--color-surface-500);
    font-style: italic;
    padding: 1.5rem 0;
}

.banner-tab__view-all {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    background: var(--color-surface-900);
    color: var(--color-white);
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}

.banner-tab__view-all:hover {
    background: var(--color-surface-700);
}

.banner-tab__continue {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    background: var(--color-accent-600);
    color: var(--color-white);
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}

.banner-tab__continue:hover {
    background: var(--color-accent-700);
}

.banner-tab__open-form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    border: 0.0625rem solid #ddd;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
    width: auto;
    flex-shrink: 0;
}

.banner-tab__open-form-btn:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.banner-tab__sell-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    align-content: start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.banner-tab__sell-form::-webkit-scrollbar {
    width: 0.375rem;
}

.banner-tab__sell-form::-webkit-scrollbar-track {
    background: transparent;
}

.banner-tab__sell-form::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 1rem;
}

.banner-tab__sell-form::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.42);
}

.banner-tab--sell-focus .banner-tab__sell-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.banner-tab__form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.375rem;
}

.banner-tab__form-label {
    position: absolute;
    top: 0.375rem;
    left: 0.75rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-brand-700);
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

.banner-tab__form-label .banner-tab__req {
    color: var(--color-danger);
}

.banner-tab__form-input,
.banner-tab__form-select,
.banner-tab__form-textarea {
    padding: 1.5rem 0.75rem 0.5rem;
    border: 0.0625rem solid #ccc;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a !important;
    background: #fff !important;
    background-color: #fff !important;
    transition: border-color 150ms ease;
}

.banner-tab__form-input::placeholder,
.banner-tab__form-textarea::placeholder {
    color: #999 !important;
}

.banner-tab__form-textarea {
    border-radius: 0.375rem;
    resize: vertical;
    min-height: 5rem;
}

.banner-tab__form-input:focus,
.banner-tab__form-select:focus,
.banner-tab__form-textarea:focus {
    outline: none;
    border-color: var(--color-brand-500);
}

.banner-tab__form-radio-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
}

.banner-tab__form-radio {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-surface-700);
    cursor: pointer;
}

.mkt-tabs__empty {
    color: var(--color-surface-500);
    font-size: 0.875rem;
    padding: 1rem 0;
}

.spec-tab-nav {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.spec-tab-nav__card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--color-surface-200);
    background: var(--color-surface, #fff);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    color: var(--color-text-body);
}

.spec-tab-nav__card:hover {
    background: var(--color-surface-50);
    border-color: var(--color-surface-300);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.spec-tab-nav__card--active {
    background: var(--color-brand-50, #f4fbfa);
    border-color: var(--color-brand-500, #2a9d8c);
    color: var(--color-brand-700, #1c7366);
}

.spec-tab-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.spec-tab-nav__card--active .spec-tab-nav__icon {
    opacity: 1;
}

.spec-tab-nav__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    /* A little air under the title. The sub is 0.625rem and sits on two lines
       of its own, so without this the whole block reads as one paragraph. */
    gap: 0.1875rem;
}

.spec-tab-nav__text strong {
    font-size: 0.875rem;
    font-weight: 700;
}

.spec-tab-nav__text small {
    font-size: 0.688rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.spec-section-header {
    margin-bottom: 1rem;
    padding: 0.375rem;
    background: #fff9;
    border-radius: 0.75rem;
}

.spec-section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 0.25rem;
}

.spec-section-header__sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.nav-quote--livetrees .banner-tab__intro,
.nav-quote--naturalgoods .banner-tab__intro {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 48rem) {
    .banner-tab__title {
        font-size: 2.5rem;
    }
    .banner-tab__layout {
        width: 100%;
    }
    .banner-tab__banner-img {
        display: none;
    }
    .banner-tab__micro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .banner-tab--sell-focus .banner-tab__sell-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .spec-tab-nav {
        flex-direction: column;
    }
}

.spec-tab-nav--commodity {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#tptab.exchange-tabs .spec-tab-nav {
    margin-bottom: 0;
}

#tptab.tabs--raised.spec-tab-nav--commodity,
#tptab.tabs--raised .spec-tab-nav--commodity {
    padding: 0.375rem;
    gap: 0.375rem;
}

#tptab.tabs--raised .spec-tab-nav__icon,
#tptab.tabs--raised .spec-tab-nav__text small {
    display: none;
}

#tptab.tabs--raised .spec-tab-nav__card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0.5rem 0.75rem;
    justify-content: center;
}

#tptab.tabs--raised .spec-tab-nav__card--active {
    background: transparent;
    border-bottom: 0.125rem solid var(--color-brand-600);
    border-radius: 0;
}

.spec-section-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.spec-section-header--action .spec-section-header__row h2 {
    margin-bottom: 0;
}

.spec-section-header--action .spec-section-header__sub {
    margin-top: 0.25rem;
}

.mkt-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding: 0.375rem 0.875rem;
    border: 0.0625rem solid var(--color-brand-600);
    border-radius: 9999px;
    background: transparent;
    color: var(--color-brand-600);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mkt-search-btn:hover {
    background: var(--color-brand-600);
    color: #fff;
}

.mkt-search-btn__icon {
    width: 1rem;
    height: 1rem;
}

.spec-tab-nav--commodity {
    grid-auto-columns: minmax(0, 1fr);
}

.spec-tab-nav--commodity .spec-tab-nav__card {
    min-width: 0;
}

.spec-tab-nav--commodity .spec-tab-nav__icon {
    flex: 0 0 auto;
}

.spec-tab-nav__text {
    min-width: 0;
}

.spec-tab-nav__text strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spec-tab-nav__text small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.spec-tab-nav--commodity .spec-tab-nav__card {
    gap: 0.5rem;
}

.spec-tab-nav--commodity {
    gap: 0.375rem;
    padding: 0.375rem;
    margin-bottom: 0;
}

.spec-tab-nav--commodity .spec-tab-nav__card {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (max-width: 75rem) {
    .spec-tab-nav--commodity .spec-tab-nav__card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .spec-tab-nav--commodity .spec-tab-nav__text {
        width: 100%;
    }
    .spec-tab-nav--commodity .spec-tab-nav__text small {
        display: none;
    }
}

@media (max-width: 30rem) {
    .spec-tab-nav--commodity .spec-tab-nav__card {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .spec-tab-nav--commodity .spec-tab-nav__text strong {
        font-size: 0.6875rem;
    }
}

@media (max-width: 20rem) {
    .spec-tab-nav--commodity {
        gap: 0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .spec-tab-nav--commodity .spec-tab-nav__card {
        padding-left: 0;
        padding-right: 0;
    }
}

.mkt-type-head__wordmark .banner-tab__title-img {
    max-height: 1.5rem;
}

@media (max-width: 40rem) {
    .mkt-type-head__wordmark .banner-tab__title-img { max-height: 1.125rem; }
}

.mkt-about {
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1);
    background: var(--color-surface, #fff);
    border-radius: 0.5rem;
    overflow: hidden;
    height: 17rem;
    width: 100%;
}

.mkt-about.carousel__article {
    height: 17rem;
}

.mkt-about.carousel__article--noimage {
    height: auto;
}

.mkt-about__title {
    color: var(--color-brand-700, #1c7366);
}

@media (max-width: 40rem) {
    .mkt-about {
        height: 22rem;
    }
}

.mkt-overview__section + .mkt-overview__section {
    margin-top: 1.5rem;
}

.mkt-overview__heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-heading, #111827);
    margin: 0 0 0.75rem;
}

.mkt-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mkt-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    /* White, so the chip reads as a raised tile on the page rather than an
       outlined one — the shadow does the separating now. */
    border: 1.5px solid var(--color-white);
    border-radius: 0.5rem;
    background: var(--color-surface, #fff);
    color: var(--color-text-body);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.mkt-cat-chip:hover {
    background: var(--color-brand-50, #f4fbfa);
    border-color: var(--color-brand-500, #2a9d8c);
    color: var(--color-brand-700, #1c7366);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.mycom-card .spec-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   THE LIST PANEL — Miti's Buy panel
   ==========================================================================
   .marketplace-section, .marketplace-grid, .marketplace-empty and the
   .drill-filter bar, from Miti's layout.css.

   Miti's Buy panel is: the shared section header, then
   section.marketplace-section--buy-panel holding div.marketplace-grid of
   cards, with .marketplace-empty when there are none, and
   div.marketplace-grid__pagination as the grid's sibling.

   Above the grid is the slot for a control that narrows it: empty on
   /naturalgoods, the facet filter on /livetrees. Here it holds a
   div.mkt-cat-list of sort chips — Miti's own pairing, the only one it
   uses for .mkt-cat-chip. The .drill-filter rules below are Miti's and are
   kept verbatim so a facet filter drops straight in, but nothing on this
   site renders them yet.

   `.marketplace-grid > *` caps every child at 30rem, which is why the grid
   takes this site's own card without a Miti card class: it targets the
   child, whatever it is. The card carries Miti's `marketplace-grid__item
   --goods` on top of that to take the portrait 20rem cap /naturalgoods uses.
   ========================================================================== */

.banner-tabs--standalone .marketplace-section__title {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.marketplace-section {
    width: 100%;
}

.marketplace-section--cms {
    margin-bottom: 1.5rem;
}

.marketplace-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.marketplace-section__title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-surface-900);
    margin: 0.75rem 0 0.5rem 0;
}

.marketplace-section__title .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-500);
}

.marketplace-section__header .marketplace-section__title {
    margin-bottom: 0;
}

.marketplace-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.marketplace-empty__desc {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.marketplace-section__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
    transition: color 0.12s;
}

.marketplace-section__link:hover {
    color: var(--color-brand-700);
}

.marketplace-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* .miti-card > higher-specificity so this cap beats the
   `@media (min-width:28.75rem) .miti-card{max-width:100%}` reset */
.marketplace-grid > .miti-card,
.marketplace-grid > * {
    width: 100%;
    max-width: 30rem;
    flex: 0 0 auto;
}

/* Natural Goods listings are portrait — cap them narrower than the landscape
   LiveTrees cards. This site’s project card takes the same slot, so it carries
   Miti’s own `marketplace-grid__item--goods` hook. */
.marketplace-grid > .miti-card--goods,
/* ...and again for the filter’s x-show wrapper, which takes the card’s place as
   the grid item when the drill-down filter is on. */
.marketplace-grid > .marketplace-grid__item--goods {
    max-width: 20rem;
}

.marketplace-grid--sm {
    gap: 1rem;
}

.marketplace-grid__pagination {
    margin-top: 1.5rem;
}

@media (min-width: 40rem) {
    .marketplace-grid {
        grid-template-columns: unset;
    }
}

@media (min-width: 72rem) {
    .marketplace-grid {
        grid-template-columns: unset;
    }
}

.drill-filter {
    --drill-accent: var(--color-surface-500);

    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;

    /* Sits on the page background, so it needs its own card. Same white,
       radius and inset as .wht-pnl — the padding is what makes the radius
       read; without it the corners clip straight through the fields.
       Radius matches the #tptab bar above (Tailwind rounded-b-lg). */
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.drill-filter--livetrees { --drill-accent: var(--livetrees); }

.drill-filter--naturalgoods { --drill-accent: var(--naturalgoods); }

.drill-filter--greenbucks { --drill-accent: var(--greenbucks); }

.drill-filter__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-surface-500);
    white-space: nowrap;
}

.drill-filter__fields {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-width: 0;
}

.drill-filter__field {
    /* The 2.375rem below is reserved for the OPEN tab to stretch into. A closed
       toggle is shorter, and flex-start left all of that slack under it, which
       made the white card look bottom-heavy. Centring splits it top and bottom.
       .is-open sets align-self: stretch, so the open tab still fills the row. */
    display: flex;
    align-items: center;
    flex: 1 1 6rem;
    min-width: 5.5rem;
    min-height: 2.375rem;
}

.drill-filter__toggle {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.625rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--drill-accent);
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--drill-accent);
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.drill-filter__toggle:hover:not(.is-disabled) {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.drill-filter__toggle.is-open {
    align-self: stretch;
    position: relative;
    z-index: 31;
    border-bottom-color: var(--color-white);
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: 700;
}

.drill-filter__toggle.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.drill-filter__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drill-filter__count {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-surface-500);
}

.drill-filter__menu {
    position: absolute;
    top: calc(100% - 0.0625rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.625rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--drill-accent);
    border-radius: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.drill-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.drill-filter__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--drill-accent);
    cursor: pointer;
}

.drill-filter__option--all {
    width: fit-content;
    margin-bottom: 0.125rem;
    font-weight: 600;
}

.drill-filter__option:hover {
    color: var(--color-surface-900);
}

.drill-filter__option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drill-filter__check {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    accent-color: var(--drill-accent);
    cursor: pointer;
}

.drill-filter__none {
    margin: 0;
    padding: 0.3125rem 0.25rem;
    font-size: 0.75rem;
    color: var(--color-surface-400);
}

.drill-filter__clear {
    appearance: none;
    background: none;
    border: none;
    padding: 0.25rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--drill-accent);
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

/* One addition Miti has no rule for: the CURRENT sort.

   Miti's drill-filter signals state with .drill-filter__toggle.is-open —
   font-weight 700 and a border change — because its control is a set of
   dropdowns, one of which is open. This site's control is a set of links,
   one of which is current, and a sort bar that does not show which sort is
   applied is not a control at all.

   So the active chip takes Miti's own signal, font-weight 700, plus the
   brand border its .is-open uses. Nothing else about the chip changes. */
.mkt-cat-chip.is-active {
    font-weight: 700;
    border-color: var(--color-brand-600);
    color: var(--color-brand-700);
}

/* ==========================================================================
   INSIGHTS PANEL — Miti's Insights tab
   ==========================================================================
   .spec-chart-card, .spec-no-data, .spec-metrics, .spec-metric-card,
   .spec-price-table and .spec-price-row, from Miti's layout.css. 20 rules,
   the whole set.

   Three colour notes, all measured off both rendered pages, not read off
   either source:

   - Miti defines NEITHER --color-text-heading NOR --color-text-muted, so on
     Miti those declarations are invalid and every title, label and count just
     inherits the body colour. --color-text-muted is no better off here: it is
     declared only in dash.css, which this page does not load, so the labels
     inherit here too and the two pages agree. Left as Miti wrote it.
     --color-text-heading is mapped to --color-surface-900, this site's
     heading colour, so the titles are a deliberate colour rather than an
     accident of an undefined name.
   - --color-surface is undefined on both, so the `, #fff` fallback is what
     paints these cards on Miti too. Left exactly as Miti wrote it.
   - --color-gray-200 is NOT var() through to this site: shell.css declares it
     only inside .header-auth, so everywhere else it fell through to
     TAILWIND's default cool-grey palette while this site's own --border is
     var(--color-surface-200), a warm one. Every --color-gray-* in this sheet
     now points at the --color-surface-* ramp, the same mapping .header-auth
     makes. This very slightly warms the borders on the tab cards and these
     insight cards; that is the correction, not a restyle.
   ========================================================================== */

/*  Chart card  */
.spec-chart-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-200);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.spec-chart-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-surface-900);
    margin-bottom: 1rem;
}

.spec-chart-card__body {
    position: relative;
    height: 220px;
}

/*  No-data state  */
.spec-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--color-text-muted);
    text-align: center;
    min-height: 10rem;
}

.spec-no-data__icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.4;
}

.spec-no-data p {
    font-size: 0.925rem;
    font-weight: 600;
    margin: 0;
}

.spec-no-data small {
    font-size: 0.8125rem;
}

/*  Market Metrics  */
.spec-metrics {
    margin-bottom: 1.5rem;
}

.spec-metrics__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-surface-900);
    margin-bottom: 0.75rem;
}

.spec-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
}

.spec-metric-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-200);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
}

.spec-metric-card__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-surface-900);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.spec-metric-card__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*  Price Table  */
.spec-price-table {
    margin-bottom: 1.5rem;
}

.spec-price-table__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-surface-900);
    margin-bottom: 0.75rem;
}

.spec-price-table__grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spec-price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-200);
    border-radius: 0.375rem;
}

.spec-price-row__stage {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: capitalize;
}

.spec-price-row__price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-brand-600, #218979);
}

.spec-price-row__count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   SIMPLE SEARCH — Miti's search block, the plain box half
   ==========================================================================
   .mkt-simple-search and its two children, from Miti's layout.css. Six rules,
   the whole set for this component.

   WHAT IS NOT HERE, and why. Miti's _search-block.blade.php offers two modes
   behind a toggle: this box, and an Advanced Search that is a four-level
   facet widget over its commodity taxonomy with a Mapbox map under it. This
   site has neither the taxonomy nor a tile provider — its map is drawn from
   coordinates on purpose. A toggle with nothing to toggle to is worse than no
   toggle, so `.mkt-adv-toggle` and `.mkt-search-modes` were not taken.

   Three values needed mapping, all measured off Miti's rendered page rather
   than read off its source, because this site defines none of them:
     --theme-bg-card  #ffffff            -> var(--color-white)
     --shadow-std     0 .375rem 1rem rgba(0,0,0,.12)  -> the literal
     the submit's hover shadow bakes Miti's own green in as
     rgba(22,163,74,.35); color-mix keeps the shape and takes this site's
     brand instead.
   ========================================================================== */

/* ── Simple search bar ─────────────────────────────────────────────────── */
.mkt-simple-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 1.25rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--color-surface-200);
    border-radius: 9999px;
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
}

/* Two classes deep on purpose. The global form rule that styles every text
   input is :is(input[type="text"], …), which outranks a single class — so a
   plain .mkt-simple-search__input { border: none } was silently losing and the
   input kept its box inside the pill. */
.mkt-simple-search .mkt-simple-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    color: var(--color-surface-900);
    padding: 0.625rem 0;
}

.mkt-simple-search__input::placeholder { color: var(--color-surface-400); }

.mkt-simple-search__input:focus { outline: none; }

.mkt-simple-search__submit {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 9999px;
    background: var(--color-brand-600);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mkt-simple-search__submit:hover {
    background: var(--color-brand-700);
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-brand-600) 35%, transparent);
    transform: translateY(-0.0625rem);
}