/*
 * Marketplace refresh
 * A deliberately small layer over Bootstrap: modern visual language without a
 * frontend rewrite or template lock-in.
 */
:root {
    --market-ink: #18181b;
    --market-muted: #6b7280;
    --market-canvas: #f7f7f5;
    --market-surface: #ffffff;
    --market-line: #e7e5e4;
    --market-accent: #f15a29;
    --market-accent-strong: #d94717;
    --market-accent-soft: #fff0ea;
    --market-success-soft: #ecfdf3;
    --market-radius: 16px;
    --market-radius-sm: 11px;
    --market-shadow: 0 12px 36px rgba(24, 24, 27, .07);
}

body {
    color: var(--market-ink);
    background: var(--market-canvas);
    font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1240px; }

.navbar {
    min-height: 64px;
    background: rgba(24, 24, 27, .96) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.navbar-brand { letter-spacing: -.025em; }

/* No colour here on purpose. body already sets --market-ink, so headings
 * inherit it on normal surfaces; forcing it made every heading dark inside
 * coloured or dark containers (e.g. the credits pricing card headers, where
 * "Starter" and "Power Pack" rendered dark-on-dark and vanished). */
h1, h2, h3, h4, .section-title {
    font-family: "DM Sans", "Inter", sans-serif;
    font-weight: 750;
    letter-spacing: -.035em;
}

.text-muted { color: var(--market-muted) !important; }

.card {
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    box-shadow: none;
}

/* Keep card outlines neutral across the site. Bootstrap's semantic border
 * utilities and page-level inline colors otherwise leak red/orange/black
 * outlines into otherwise consistent cards. Explicitly borderless cards keep
 * their intentional no-outline treatment. */
.card:not(.border-0) {
    border-color: var(--market-line) !important;
}

.card:hover {
    transform: none;
    box-shadow: var(--market-shadow);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    max-width: 960px;
    margin-inline: auto;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .1rem;
    padding: 1.15rem .75rem 1.25rem;
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    background: var(--market-surface);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.category-card:hover {
    border-color: rgba(241, 90, 41, .45);
    box-shadow: var(--market-shadow);
    transform: translateY(-3px);
}

.category-card .category-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: .7rem;
    place-items: center;
    border-radius: 15px;
    color: var(--market-accent);
    background: var(--market-accent-soft);
    font-size: 1.35rem;
}

.category-card-title {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    color: var(--market-ink);
    font-family: "DM Sans", "Inter", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    text-wrap: balance;
}

.category-card-blurb {
    margin-top: .25rem;
    color: #57534e;
    font-size: .8rem;
    line-height: 1.3;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-hero {
    margin: -1.5rem calc(50% - 50vw) 3.5rem;
    padding: clamp(3.5rem, 7vw, 6.5rem) max(1rem, calc((100vw - 1240px) / 2));
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(241, 90, 41, .12), transparent 28rem),
        linear-gradient(180deg, #fff 0%, var(--market-canvas) 100%);
    border-bottom: 1px solid var(--market-line);
}

.home-hero-copy {
    max-width: 980px;
    margin-inline: auto;
}

.home-hero-copy h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    line-height: 1.02;
    text-wrap: balance;
}

.home-hero-copy > p {
    margin: 0 auto 1.15rem;
    color: var(--market-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.home-discovery {
    max-width: 960px;
    margin: clamp(2.75rem, 5vw, 4.5rem) auto 2.25rem;
    text-align: center;
}

.home-discovery > h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
}

.home-search {
    display: flex;
    align-items: center;
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: .45rem .45rem .45rem 1.15rem;
    border: 1px solid #d6d3d1;
    border-radius: 999px;
    background: white;
    box-shadow: 0 16px 45px rgba(24, 24, 27, .1);
}

.home-search-icon {
    color: var(--market-muted);
}

.home-search .form-control {
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity .18s ease, transform .18s ease;
}

.home-search .form-control.placeholder-changing {
    opacity: .15;
    transform: translateY(-3px);
}

.home-search .btn {
    flex: 0 0 auto;
    min-width: 112px;
}

.home-search-submit-icon { display: none; }

.rig-entry {
    max-width: 760px;
    margin: -1.25rem auto 2.75rem;
}

.rig-entry-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    border: 1px solid #fed7c7;
    border-radius: 18px;
    color: var(--market-ink);
    background: rgba(255, 255, 255, .72);
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rig-entry-toggle:hover,
.rig-entry-toggle:focus-visible {
    border-color: #fb9a78;
    box-shadow: 0 10px 30px rgba(241, 90, 41, .1);
    transform: translateY(-1px);
}

.rig-entry-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, var(--market-accent), #ff8a5c);
}

.rig-entry-copy {
    display: grid;
    flex: 1;
    line-height: 1.2;
}

.rig-entry-copy strong {
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
}

.rig-entry-copy small {
    margin-top: .2rem;
    color: var(--market-muted);
    font-size: .78rem;
}

.rig-entry-badge {
    padding: .35rem .65rem;
    border-radius: 999px;
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rig-entry-chevron {
    color: var(--market-muted);
    font-size: .75rem;
    transition: transform .2s ease;
}

.rig-entry-toggle[aria-expanded="true"] .rig-entry-chevron {
    transform: rotate(180deg);
}

.rig-prompt-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin-top: .65rem;
}

.rig-prompt-examples button {
    padding: .35rem .7rem;
    border: 1px solid var(--market-line);
    border-radius: 999px;
    color: var(--market-muted);
    background: rgba(255, 255, 255, .65);
    font-size: .72rem;
}

.rig-prompt-examples button:hover {
    border-color: #fb9a78;
    color: var(--market-accent-strong);
}

.rig-smart-panel {
    margin-top: .75rem !important;
    padding: 1rem !important;
    border: 1px solid #fed7c7;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #fff 0%, #fff7f3 100%) !important;
    box-shadow: 0 18px 45px rgba(24, 24, 27, .08) !important;
    text-align: left;
}

.rig-smart-panel[hidden] { display: none !important; }
.rig-smart-panel::before { display: none; }
.rig-smart-panel > .container:first-child { display: none; }
.rig-smart-panel .search-bar-container > .container { padding: 0; }
.rig-smart-panel .row { margin: 0; }
.rig-smart-panel .row > [class*="col-"] {
    width: 100%;
    padding: 0;
}
.rig-smart-panel .compact-search-wrapper {
    border: 1px solid var(--market-line);
    box-shadow: none;
}
.rig-smart-panel .suggestion-tag {
    border-color: #fed7c7;
    color: var(--market-accent-strong);
    background: white;
}
.rig-smart-panel .expandable-chat {
    margin: 1rem -1rem -1rem;
    border-radius: 0 0 22px 22px;
}

.category-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.category-section-heading h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.category-hero { padding: 0; }

.listing-rail-title {
    display: -webkit-box;
    min-height: 2.5rem;
    margin-bottom: .65rem;
    overflow: hidden;
    color: var(--market-ink);
    font-family: "Inter", sans-serif;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.listing-rail-price {
    margin-bottom: .65rem;
    color: var(--market-accent);
    font-size: 1rem;
    font-weight: 750;
}

.listing-rail-meta {
    display: grid;
    gap: .3rem;
    color: var(--market-muted);
    font-size: .75rem;
}

.listing-rail-meta span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.listing-rail-meta i {
    width: 1rem;
    margin-right: .25rem;
    color: #a8a29e;
}

/* 650 was rounding up to 700 — Inter is loaded as static instances
 * (400;500;600;700), so any value above 600 snaps to bold. 600 is a real
 * instance and renders one step lighter. */
.btn {
    min-height: 42px;
    border-radius: 999px;
    font-weight: 600;
}

.btn-sm { min-height: 34px; }
.btn-close,
.navbar-toggler,
.search-mode-btn {
    border-radius: var(--market-radius-sm);
}
.btn-primary {
    background: var(--market-accent);
    border-color: var(--market-accent);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--market-accent-strong);
    border-color: var(--market-accent-strong);
}

.form-control, .form-select {
    min-height: 46px;
    border-color: var(--market-line);
    border-radius: var(--market-radius-sm);
    background-color: var(--market-surface);
}

.form-control:focus, .form-select:focus {
    border-color: var(--market-accent);
    box-shadow: 0 0 0 4px rgba(241, 90, 41, .12);
}

.listing-card-clickable,
.infinite-scroll-card {
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    box-shadow: none;
}

.listing-card-clickable:hover,
.infinite-scroll-card:hover {
    transform: translateY(-3px);
    border-color: #d6d3d1;
    box-shadow: var(--market-shadow);
}

.listing-thumbnail,
.infinite-scroll-card .card-img-top {
    background: #efefec;
}

.specs-section,
.spec-section > .card {
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    background: var(--market-surface);
}

.specs-section hr { opacity: .08; }

.listing-mode-toggle {
    padding: .75rem 1rem;
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius-sm);
    background: var(--market-surface);
}

.sell-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.sell-progress li {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .8rem;
    color: var(--market-muted);
    border-radius: var(--market-radius-sm);
    cursor: pointer;
}

.sell-progress li:focus-visible {
    outline: 2px solid var(--market-accent);
    outline-offset: 2px;
}

.sell-progress li > span {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    height: 32px;
    font-weight: 750;
    border: 1px solid var(--market-line);
    border-radius: 50%;
    background: var(--market-surface);
}

.sell-progress li.active {
    color: var(--market-ink);
    background: var(--market-accent-soft);
}

.sell-progress li.active > span {
    color: white;
    border-color: var(--market-accent);
    background: var(--market-accent);
}

.sell-progress li.completed {
    color: var(--market-ink);
}

.sell-progress li.completed > span {
    color: white;
    border-color: var(--market-accent);
    background: var(--market-accent);
}

.sell-progress strong, .sell-progress small { display: block; }
.sell-progress small { overflow: hidden; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }

.table > :not(caption) > * > * {
    padding: .8rem .65rem;
    border-bottom-color: var(--market-line);
}

@media (max-width: 767.98px) {
    body { padding-top: 64px; }
    h1 { font-size: 1.75rem; }
    .card:hover, .category-card:hover { transform: none; }
    .category-grid {
        display: flex;
        max-width: none;
        margin-inline: -1rem;
        padding: .1rem 1rem .75rem;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .category-grid::-webkit-scrollbar { display: none; }
    .category-card {
        flex: 0 0 min(52vw, 190px);
        min-height: 0;
        aspect-ratio: auto;
        scroll-snap-align: start;
        gap: .35rem;
        padding: .7rem .45rem .75rem;
    }
    .category-card .category-icon {
        width: 36px;
        height: 36px;
        margin-bottom: .25rem;
        font-size: .9rem;
    }
    .category-card-title {
        min-height: 2rem;
        font-size: .8rem;
    }
    .category-card-blurb { font-size: .68rem; }
    .category-hero { padding-top: 1rem; }
    .home-hero {
        margin-bottom: 2.5rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .home-hero-copy h1 { font-size: 2rem; }
    .home-search { padding-left: .9rem; }
    .home-search .btn {
        min-width: 48px;
        width: 48px;
        padding-inline: 0;
        font-size: 0;
    }
    .home-search .btn::after { display: none; }
    .home-search .home-search-submit-label { display: none; }
    .home-search .home-search-submit-icon {
        display: inline-block;
        font-size: .9rem;
    }
    .rig-entry {
        margin-top: -1.4rem;
    }
    .rig-entry-badge { display: none; }
    .rig-entry-copy small { font-size: .72rem; }
    .rig-prompt-examples {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .25rem;
        scrollbar-width: none;
    }
    .rig-prompt-examples button {
        flex: 0 0 auto;
    }
    .category-section-heading {
        flex-direction: column;
        gap: .75rem;
    }
    .sell-progress { grid-template-columns: repeat(4, minmax(54px, 1fr)); gap: .25rem; }
    .sell-progress li { justify-content: center; padding: .55rem .2rem; }
    .sell-progress li > div { display: none; }
}

/* ------------------------------------------------------------------
 * UX polish pass
 * Accent discipline, alignment axis, image ratios, funnel consistency.
 * ------------------------------------------------------------------ */

/* --- Accent discipline -------------------------------------------
 * Solid orange is reserved for the single primary action per view.
 * Secondary actions ("View all", section CTAs) drop to a neutral
 * outline so price and primary CTA stop competing for the same colour.
 */
.btn-outline-primary {
    border-color: var(--market-line);
    color: #44403c;
    background: var(--market-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: #d6d3d1;
    color: var(--market-ink);
    background: #faf9f7;
}

.category-section-heading .btn-primary {
    border-color: var(--market-line);
    color: #44403c;
    background: var(--market-surface);
}

/* themes/black-orange.css sets .btn-primary:hover background !important.
 * Without !important here the background stayed solid orange while the text
 * recoloured to orange — the label vanished on hover. */
.category-section-heading .btn-primary:hover,
.category-section-heading .btn-primary:focus,
.category-section-heading .btn-primary:active {
    border-color: rgba(241, 90, 41, .45) !important;
    color: var(--market-accent-strong) !important;
    background-color: var(--market-accent-soft) !important;
}

/* --- Alignment axis ----------------------------------------------
 * Hero is centred; everything from the category grid down is
 * left-aligned on one axis instead of switching mid-page.
 */
.category-section-heading {
    justify-content: space-between;
    max-width: 960px;
    margin-inline: auto;
    text-align: left;
}

.home-discovery { margin-bottom: 1.5rem; }

.homepage-listing-rail,
.live-activity { margin-bottom: 3.5rem; }

/* --- Listing imagery ---------------------------------------------
 * Locked ratio so rails align and the empty state is a designed tile
 * rather than a stretched placeholder.
 */
.listing-thumbnail-small,
.listing-thumbnail,
.infinite-scroll-card .card-img-top {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #efefec;
}

.listing-thumbnail-empty {
    display: grid;
    place-items: center;
    color: #a8a29e;
    background: #f2f1ee;
    font-size: 1.5rem;
}

/* --- Off-palette cleanup ----------------------------------------- */
.kudo-count,
.infinite-scroll-card .kudo-count {
    color: #78716c !important;
}

.listing-card-small .badge.bg-warning,
.listing-card-small .badge.bg-info {
    color: #44403c !important;
    background: #f5f5f4 !important;
}

/* --- Funnel consistency ------------------------------------------
 * The token layer already applies site-wide; these bring the
 * page-level chrome underneath it into the same system so listing
 * detail stops reading as a hybrid of two designs.
 */
/* themes/black-orange.css forces .card-header black !important, so this must
 * be !important to win. Deliberately scoped to headers with NO colour class of
 * their own: .bg-success / .bg-info / .text-white headers carry semantic colour
 * (buyer protection, order state) and must keep their own background — an
 * unscoped rule here renders them white-on-white. */
.card-header:not([class*="bg-"]):not(.text-white) {
    border-bottom: 1px solid var(--market-line);
    color: var(--market-ink) !important;
    background-color: var(--market-surface) !important;
    font-family: "DM Sans", "Inter", sans-serif;
    font-weight: 700;
}

.card-header:not([class*="bg-"]):not(.text-white) h1,
.card-header:not([class*="bg-"]):not(.text-white) h2,
.card-header:not([class*="bg-"]):not(.text-white) h3,
.card-header:not([class*="bg-"]):not(.text-white) h4,
.card-header:not([class*="bg-"]):not(.text-white) h5,
.card-header:not([class*="bg-"]):not(.text-white) h6 {
    color: var(--market-ink) !important;
    font-size: 1.05rem;
}

/* Account and listing detail cards use the seller-information treatment: a
 * white header with dark text. This deliberately overrides the legacy black
 * theme, including headers carrying text-white or inline accent colors. */
.account-page .card-header,
.listing-detail-page .card-header,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) {
    color: var(--market-ink) !important;
    background-color: var(--market-surface) !important;
    border-bottom: 1px solid var(--market-line) !important;
}

.account-page .card-header h1,
.account-page .card-header h2,
.account-page .card-header h3,
.account-page .card-header h4,
.account-page .card-header h5,
.account-page .card-header h6,
.listing-detail-page .card-header h1,
.listing-detail-page .card-header h2,
.listing-detail-page .card-header h3,
.listing-detail-page .card-header h4,
.listing-detail-page .card-header h5,
.listing-detail-page .card-header h6,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h1,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h2,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h3,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h4,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h5,
.buyer-protection-order-page .card-header:not([class*="bg-"]):not(.text-white) h6 {
    color: var(--market-ink) !important;
}

.buyer-protection-order-page .order-header-card {
    background: var(--market-surface);
}

.buyer-protection-order-page .order-header-card .card-body {
    color: var(--market-ink);
}

.buyer-protection-order-page .order-header-card .opacity-75 {
    opacity: 1 !important;
    color: var(--market-muted);
}

/* Empty state: was the only blue surface in a warm-neutral system.
 * Scoped — .alert-info is used in ~41 templates where the semantic
 * colour still carries meaning. */
.search-empty-state {
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    color: #44403c;
    background: var(--market-surface);
}

.search-empty-state .fas { color: #a8a29e; }

/* Buyer-protection purchase card: keep long translated labels compact in the
 * listing sidebar without shrinking the rest of the marketplace UI. */
.buyer-protection-purchase-card .card-header h3 {
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.25;
}

.buyer-protection-purchase-card .price-breakdown {
    font-size: .92rem;
}

.buyer-protection-purchase-card .price-breakdown .fw-bold {
    font-weight: 650 !important;
}

.buyer-protection-purchase-card .price-breakdown > .d-flex:last-child {
    font-size: 1rem;
}

.buyer-protection-purchase-card .btn-lg {
    padding: .7rem 1rem;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
}

.listing-action-btn {
    font-family: "DM Sans", "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
}

/* My listings controls: compact rectangles read better than four icon circles. */
.my-listings-actions .btn {
    border-radius: var(--market-radius-sm) !important;
}

/* My Orders tabs: keep hover and active states stable instead of shifting tab borders. */
.order-tabs-card {
    overflow: hidden;
}

#orderTabs {
    gap: .35rem;
    padding: .45rem;
    margin: 0;
    border-bottom: 0;
}

#orderTabs .nav-item {
    flex: 1 1 0;
}

#orderTabs .nav-link {
    width: 100%;
    min-height: 44px;
    padding: .65rem .9rem;
    border: 1px solid transparent !important;
    border-radius: var(--market-radius-sm) !important;
    color: var(--market-muted);
    font-weight: 600;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

#orderTabs .nav-link:hover:not(.active),
#orderTabs .nav-link:focus-visible {
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
    border-color: var(--market-line) !important;
}

#orderTabs .nav-link.active {
    color: var(--market-accent-strong) !important;
    background: var(--market-accent-soft) !important;
    border-color: var(--market-line) !important;
}

#orderTabs .badge {
    background: var(--market-accent) !important;
}

/* --- Navbar search reveal ----------------------------------------
 * Restores persistent search on the homepage once the hero search
 * scrolls out of view (both comparables keep search in the header).
 */
.navbar-search-reveal {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.navbar-search-reveal.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.navbar-search-reveal .form-control {
    height: 46px;
    min-height: 46px;
}

.navbar-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.1rem;
    line-height: 1;
}

/* --- Shared dropdown surface -----------------------------------
 * The blog uses a quiet white panel with generous spacing and a single
 * orange active state. Keep the same treatment across navigation and listing
 * actions while preserving Bootstrap's existing open/close behavior.
 */
.category-nav-menu,
.language-nav-menu,
.profile-nav-menu,
.listing-share-menu,
.my-listings-menu {
    margin-top: .65rem;
    padding: .65rem 0;
    border: 1px solid var(--market-line);
    border-top: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    background: var(--market-surface);
    box-shadow: 0 18px 44px rgba(24, 24, 27, .12);
}

.marketplace-dropdown-menu {
    min-width: 220px;
    margin-top: .65rem !important;
    padding: .65rem 0;
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    background: var(--market-surface);
    box-shadow: 0 18px 44px rgba(24, 24, 27, .12);
}

.marketplace-dropdown-menu > li > .dropdown-item,
.marketplace-dropdown-menu > li > form > .dropdown-item {
    display: flex;
    align-items: center;
    width: calc(100% - .8rem);
    min-height: 44px;
    margin: 0 .4rem;
    padding: .65rem .9rem;
    border-radius: var(--market-radius-sm);
    color: var(--market-ink);
    font-size: .95rem;
    font-weight: 500;
    transition: color .16s ease, background-color .16s ease;
}

.marketplace-dropdown-menu > li > .dropdown-item:hover,
.marketplace-dropdown-menu > li > .dropdown-item:focus,
.marketplace-dropdown-menu > li > .dropdown-item.active,
.marketplace-dropdown-menu > li > .dropdown-item:active,
.marketplace-dropdown-menu > li > form > .dropdown-item:hover,
.marketplace-dropdown-menu > li > form > .dropdown-item:focus {
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
}

.marketplace-dropdown-menu > li > form {
    display: block;
    margin: 0;
    padding: 0;
}

.marketplace-dropdown .dropdown-toggle {
    border-color: var(--market-line);
    color: var(--market-ink);
    background: var(--market-surface);
    border-radius: var(--market-radius-sm);
}

.marketplace-dropdown .dropdown-toggle:hover,
.marketplace-dropdown .dropdown-toggle:focus,
.marketplace-dropdown.show .dropdown-toggle {
    border-color: var(--market-accent);
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
}

.search-options-menu {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: min(26rem, calc(100vw - 2rem));
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    z-index: 1050;
    transform: none !important;
    white-space: normal;
}

/* The smart-search shell is rounded, but its options panel must be allowed
 * to escape the input bounds instead of being clipped by the search chrome. */
.compact-smart-search,
.compact-smart-search .search-bar-container,
.compact-smart-search .compact-search-wrapper {
    overflow: visible;
}

.compact-smart-search .search-options-dropdown {
    z-index: 1051;
}

.search-options-menu .search-mode-option {
    width: calc(100% - .8rem);
    min-height: 44px;
    margin: 0 .4rem;
    padding: .65rem .9rem;
    border-left: 0 !important;
    border-radius: var(--market-radius-sm);
    color: var(--market-ink);
}

.search-options-menu .search-mode-option.active,
.search-options-menu .search-mode-option:hover,
.search-options-menu .search-mode-option:focus {
    color: var(--market-accent-strong) !important;
    background: var(--market-accent-soft) !important;
}

.category-nav-menu {
    min-width: 255px;
}

.language-nav-menu {
    min-width: 170px;
}

.profile-nav-menu {
    min-width: 210px;
}

.listing-share-menu {
    min-width: 210px;
}

.my-listings-menu {
    width: 220px;
    min-width: 0;
    max-width: calc(100vw - 2rem);
}

.my-listings-actions > .dropdown {
    width: auto !important;
}

.my-listings-menu .dropdown-item {
    white-space: normal;
    line-height: 1.25;
}

.dropup > .listing-share-menu {
    margin-top: 0;
    margin-bottom: .65rem;
}

.category-nav-menu > li > .dropdown-item,
.language-nav-menu > li > .dropdown-item,
.profile-nav-menu > li > .dropdown-item,
.listing-share-menu > li > .dropdown-item,
.my-listings-menu > li > .dropdown-item,
.my-listings-menu > li > form > .dropdown-item {
    display: flex;
    align-items: center;
    width: calc(100% - .8rem);
    min-height: 44px;
    margin: 0 .4rem;
    padding: .65rem .9rem;
    border-radius: var(--market-radius-sm);
    color: var(--market-ink);
    font-size: .95rem;
    font-weight: 500;
    transition: color .16s ease, background-color .16s ease;
}

.category-nav-menu > li > .dropdown-item {
    min-height: 48px;
    font-size: 1rem;
}

.category-nav-menu > li > .dropdown-item:hover,
.category-nav-menu > li > .dropdown-item:focus,
.language-nav-menu > li > .dropdown-item:hover,
.language-nav-menu > li > .dropdown-item:focus,
.profile-nav-menu > li > .dropdown-item:hover,
.profile-nav-menu > li > .dropdown-item:focus,
.listing-share-menu > li > .dropdown-item:hover,
.listing-share-menu > li > .dropdown-item:focus,
.my-listings-menu > li > .dropdown-item:hover,
.my-listings-menu > li > .dropdown-item:focus,
.my-listings-menu > li > form > .dropdown-item:hover,
.my-listings-menu > li > form > .dropdown-item:focus {
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
}

.my-listings-menu > li > form {
    display: block !important;
    margin: 0;
    padding: 0 !important;
}

.language-nav-menu > li > .dropdown-item.active,
.language-nav-menu > li > .dropdown-item:active {
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
}

.category-nav-menu .dropdown-divider,
.profile-nav-menu .dropdown-divider,
.listing-share-menu .dropdown-divider,
.my-listings-menu .dropdown-divider {
    margin: .55rem .8rem;
    border-color: var(--market-line);
    opacity: 1;
}

.category-nav-menu .dropdown-submenu {
    min-width: 235px;
    margin-left: .35rem;
    padding: .65rem 0;
    border: 1px solid var(--market-line);
    border-radius: var(--market-radius);
    box-shadow: 0 18px 44px rgba(24, 24, 27, .12);
}

.category-nav-menu .dropdown-submenu .dropdown-item {
    width: calc(100% - .8rem);
    margin: 0 .4rem;
    padding: .55rem .85rem;
    border-radius: var(--market-radius-sm);
    color: var(--market-ink);
}

.category-nav-menu .dropdown-submenu .dropdown-item:hover,
.category-nav-menu .dropdown-submenu .dropdown-item:focus {
    color: var(--market-accent-strong);
    background: var(--market-accent-soft);
}

/* Keep legacy theme hover rules inside the menu item bounds. */
#navbarNav .category-nav-menu .dropdown-submenu > li > .dropdown-item:hover,
#navbarNav .category-nav-menu .dropdown-submenu > li > .dropdown-item:focus {
    color: var(--market-accent-strong) !important;
    background: var(--market-accent-soft) !important;
}

.category-nav-toggle,
.language-nav-toggle {
    display: inline-flex;
    align-items: center;
}

.language-nav-toggle {
    color: rgba(255, 255, 255, .75) !important;
}

.language-nav-toggle:hover,
.language-nav-toggle:focus {
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .category-nav-menu,
    .language-nav-menu,
    .profile-nav-menu,
    .listing-share-menu,
    .my-listings-menu {
        margin-top: 0;
        border: 0;
        border-radius: var(--market-radius-sm);
        box-shadow: none;
    }

    .category-nav-menu .dropdown-submenu {
        min-width: 0;
        margin: 0 .7rem;
        border: 0;
        border-radius: var(--market-radius-sm);
        box-shadow: none;
        background: #faf9f7;
    }
}

/* --- Mobile navigation ------------------------------------------
 * The legacy mobile rules made dropdowns transparent while the modern
 * dropdown layer kept their text dark. Keep the whole expanded menu on the
 * navbar surface so the hierarchy remains readable and tappable.
 */
@media (max-width: 991.98px) {
    .mobile-nav-panel {
        max-height: calc(100vh - 72px);
        margin-top: .65rem;
        padding: .6rem;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: var(--market-radius);
        background: #242426;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav-panel .navbar-nav {
        gap: .2rem;
    }

    .mobile-nav-panel .nav-link {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        padding: .7rem .85rem;
        border-radius: var(--market-radius-sm);
        color: rgba(255, 255, 255, .86) !important;
    }

    .mobile-nav-panel .nav-link:hover,
    .mobile-nav-panel .nav-link:focus,
    .mobile-nav-panel .nav-link.show {
        color: #fff !important;
        background: rgba(255, 255, 255, .1);
    }

    .mobile-nav-panel .nav-item > .nav-link {
        justify-content: flex-start;
        margin: 0;
    }

    .mobile-nav-panel .category-nav-toggle {
        justify-content: space-between !important;
        touch-action: manipulation;
    }

    .mobile-nav-panel .language-nav-item {
        margin-top: .35rem;
        padding-top: .45rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .mobile-nav-panel .language-nav-toggle {
        justify-content: space-between !important;
        color: rgba(255, 255, 255, .86) !important;
        touch-action: manipulation;
    }

    .mobile-nav-panel .dropdown-menu,
    .mobile-nav-panel .category-nav-menu,
    .mobile-nav-panel .profile-nav-menu,
    .mobile-nav-panel .language-nav-menu {
        margin: .3rem 0 .55rem;
        padding: .45rem;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: var(--market-radius-sm);
        background: #303033 !important;
        box-shadow: none;
    }

    .mobile-nav-panel .language-nav-menu {
        position: static !important;
        width: 100%;
        transform: none !important;
        overflow: hidden;
    }

    .mobile-nav-panel .language-nav-menu > li > .dropdown-item {
        width: calc(100% - .6rem);
        margin-inline: .3rem;
    }

    .mobile-nav-panel .dropdown-menu .dropdown-item,
    .mobile-nav-panel .category-nav-menu > li > .dropdown-item,
    .mobile-nav-panel .profile-nav-menu > li > .dropdown-item,
    .mobile-nav-panel .language-nav-menu > li > .dropdown-item {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        margin: 0;
        padding: .7rem .75rem;
        border-radius: var(--market-radius-sm);
        color: rgba(255, 255, 255, .88) !important;
        background: transparent !important;
    }

    .mobile-nav-panel .dropdown-menu .dropdown-item:hover,
    .mobile-nav-panel .dropdown-menu .dropdown-item:focus,
    .mobile-nav-panel .dropdown-menu .dropdown-item.active {
        color: #fff !important;
        background: rgba(241, 90, 41, .2) !important;
    }

    .mobile-nav-panel .category-nav-menu .dropdown-submenu {
        margin: .25rem .35rem .45rem;
        padding: .3rem;
        border: 0;
        border-left: 2px solid var(--market-accent);
        border-radius: 0 var(--market-radius-sm) var(--market-radius-sm) 0;
        background: #252527 !important;
    }

    .mobile-nav-panel .category-nav-menu .dropdown-submenu .dropdown-item {
        min-height: 40px;
        padding: .55rem .7rem;
        color: rgba(255, 255, 255, .72) !important;
        font-size: .92rem;
    }

    .mobile-nav-panel .dropdown-divider {
        margin: .45rem .4rem;
        border-color: rgba(255, 255, 255, .14);
    }

    .mobile-nav-panel > form {
        margin: .75rem 0 .25rem !important;
    }

    .mobile-nav-panel > form .form-control {
        border-color: rgba(255, 255, 255, .18);
        background: #303033;
        color: #fff;
    }

    .mobile-nav-panel > form .form-control::placeholder {
        color: rgba(255, 255, 255, .55);
    }
}

/* ------------------------------------------------------------------
 * Button hover: still, with a light sweep
 * themes/black-orange.css lifts every button by translateY(-2px) on
 * hover/focus/active, which makes them twitch under the cursor. Buttons stay
 * put; the feedback is the sweep borrowed from .compact-search-btn instead.
 * Cards keep their lift — this is scoped to .btn only.
 * ------------------------------------------------------------------ */
.btn:hover,
.btn:focus,
.btn:active,
.btn-primary-action:hover,
.compact-search-btn:hover {
    transform: none !important;
}

/* Sweep on solid primary actions. */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left .5s ease;
    pointer-events: none;
}

.btn-primary:hover::after {
    left: 100%;
}

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