/*
 * Final site-wide theme and listing-detail repair layer.
 *
 * The existing light marketplace stylesheet remains the default. When a user
 * selects dark mode, the original dark theme is re-applied immediately before
 * this file. These rules provide the shared controls and protect newer app
 * components from falling between the two theme layers.
 */

html[data-theme="light"] {
    color-scheme: light;
    --fx-bg: #ffffff;
    --fx-bg-soft: #f7f7f7;
    --fx-panel: #ffffff;
    --fx-panel-2: #f3f4f6;
    --fx-panel-3: #e8ebf0;
    --fx-line: #e2e2e2;
    --fx-line-strong: #b8b8b8;
    --fx-text: #191919;
    --fx-text-soft: #3f3f3f;
    --fx-muted: #686868;
    --fx-blue: #3665f3;
    --fx-blue-strong: #2b52cc;
    --fx-cyan: #3665f3;
    --fx-lime: #86d52f;
    --fx-danger: #e0103a;
    --fx-theme-overlay: rgba(255, 255, 255, .96);
    --fx-theme-shadow: 0 12px 32px rgba(17, 24, 39, .14);
    --fx-accent-ink: #071431;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --fx-bg: #07090d;
    --fx-bg-soft: #0b0f16;
    --fx-panel: #101620;
    --fx-panel-2: #151d29;
    --fx-panel-3: #1b2533;
    --fx-line: rgba(161, 183, 214, .18);
    --fx-line-strong: rgba(161, 183, 214, .32);
    --fx-text: #f5f8fc;
    --fx-text-soft: #c5cfdd;
    --fx-muted: #9ba8ba;
    --fx-blue: #65a0ff;
    --fx-blue-strong: #8bb7ff;
    --fx-cyan: #65dfff;
    --fx-lime: #a8ff60;
    --fx-danger: #ff6475;
    --fx-theme-overlay: rgba(7, 9, 13, .96);
    --fx-theme-shadow: 0 14px 38px rgba(0, 0, 0, .46);
    --fx-accent-ink: #06132f;
    --market-ink: #f5f8fc;
    --market-muted: #9ba8ba;
    --market-line: rgba(161, 183, 214, .18);
    --market-soft: #101620;
}

html[data-theme] {
    background: var(--fx-bg);
}

html[data-theme] body {
    color: var(--fx-text);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 12% 0%, rgba(36, 108, 255, .12), transparent 27rem),
        radial-gradient(circle at 95% 12%, rgba(168, 255, 96, .055), transparent 22rem),
        var(--fx-bg);
}

/* Persistent theme controls */
.fx-theme-toggle {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--fx-text);
    border: 1px solid var(--fx-line-strong);
    border-radius: 999px;
    background: var(--fx-panel);
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
}

.fx-theme-toggle:hover {
    color: var(--fx-blue);
    border-color: var(--fx-blue);
    background: var(--fx-panel-2);
}

.fx-theme-toggle:focus-visible,
.app-account-theme-control:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fx-blue) 32%, transparent);
    outline-offset: 2px;
}

.fx-theme-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-theme-icon-sun { display: none; }
html[data-theme="dark"] .fx-theme-icon-moon { display: none; }
html[data-theme="dark"] .fx-theme-icon-sun { display: block; }

.fx-theme-toggle-desktop {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin-right: 2px;
}

.fx-theme-toggle-desktop .fx-theme-icon {
    width: 17px;
    height: 17px;
}

.app-account-theme-control {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    color: var(--fx-text);
    border: 0;
    border-bottom: 1px solid var(--fx-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-account-theme-control > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.app-account-theme-control small { color: var(--fx-muted); }
.app-account-theme-control i { color: var(--fx-muted); font-size: 1.35rem; font-style: normal; }

@media (min-width: 901px) {
    .app-account-settings .app-account-theme-control {
        min-height: 82px;
        padding: 18px;
        border: 1px solid var(--fx-line);
        border-radius: 14px;
        background: var(--fx-panel);
    }
}

/* Newer app surfaces follow dark mode as well as the original desktop theme. */
html[data-theme="dark"] .app-mobile-header {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: rgba(7, 9, 13, .97);
}

html[data-theme="dark"] .app-mobile-brand,
html[data-theme="dark"] .app-mobile-search,
html[data-theme="dark"] .app-mobile-search input,
html[data-theme="dark"] .app-mobile-search > svg,
html[data-theme="dark"] .app-search-camera { color: var(--fx-text); }

html[data-theme="dark"] .app-mobile-search,
html[data-theme="dark"] .app-icon-button {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-panel);
}

html[data-theme="dark"] .app-mobile-search input { background: transparent; }
html[data-theme="dark"] .app-mobile-search input::placeholder { color: var(--fx-muted); }

html[data-theme="dark"] .app-bottom-nav {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: rgba(7, 9, 13, .98);
    box-shadow: 0 -7px 24px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .app-bottom-nav a { color: var(--fx-muted); }
html[data-theme="dark"] .app-bottom-nav a.is-active {
    color: var(--fx-blue);
    background: rgba(74, 141, 255, .14);
}

html[data-theme="dark"] .site-footer {
    color: var(--fx-text-soft);
    border-color: var(--fx-line);
    background: var(--fx-bg-soft);
}

html[data-theme="dark"] .site-footer h2,
html[data-theme="dark"] .site-footer strong,
html[data-theme="dark"] .site-footer a { color: var(--fx-text); }

html[data-theme="dark"] .app-card-popover {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-panel);
    box-shadow: var(--fx-theme-shadow);
}

html[data-theme="dark"] .app-card-popover :is(a, button):hover,
html[data-theme="dark"] .app-card-popover :is(a, button):focus-visible {
    background: var(--fx-panel-2);
}

html[data-theme="dark"] :is(
    .app-shortcuts a:not(.is-featured),
    .app-feed-notice,
    .app-sell-prompt,
    .app-guide-card,
    .app-load-more,
    .app-confidence-banner
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

html[data-theme="dark"] :is(
    .app-feed-notice strong,
    .app-feed-notice p,
    .app-sell-prompt h2,
    .app-sell-prompt p,
    .app-confidence-banner h2,
    .app-confidence-banner p,
    .app-guide-card h3,
    .app-guide-card h3 a
) { color: var(--fx-text); }

html[data-theme="dark"] :is(
    .app-feed-notice p,
    .app-sell-prompt p,
    .app-confidence-banner p,
    .app-guide-card p,
    .app-recommendation-reason
) { color: var(--fx-muted); }

html[data-theme="dark"] .app-category-disc {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] .category-phone { background: color-mix(in srgb, var(--fx-danger) 18%, var(--fx-panel)); }
html[data-theme="dark"] .category-console { background: color-mix(in srgb, var(--fx-blue) 18%, var(--fx-panel)); }
html[data-theme="dark"] .category-computing { background: color-mix(in srgb, #9d7bff 18%, var(--fx-panel)); }
html[data-theme="dark"] .category-donor { background: color-mix(in srgb, #ffcb5c 14%, var(--fx-panel)); }
html[data-theme="dark"] .category-parts { background: color-mix(in srgb, var(--fx-lime) 13%, var(--fx-panel)); }
html[data-theme="dark"] .category-tools { background: var(--fx-panel-2); }
html[data-theme="dark"] .category-guides { background: color-mix(in srgb, #ffcb5c 14%, var(--fx-panel)); }

html[data-theme="dark"] .app-listing-card .watch-button {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: rgba(16, 22, 32, .94);
}

html[data-theme="dark"] .app-listing-card :is(h3, h3 a, .price) { color: var(--fx-text); }
html[data-theme="dark"] .app-listing-card :is(.app-card-meta, small, .delivery-note, .card-auction-line, .fault-summary) { color: var(--fx-muted); }
html[data-theme="dark"] .app-listing-card .card-auction-line strong { color: var(--fx-lime); }

html[data-theme="dark"] :is(
    .app-results-intro,
    .page-hero,
    .page-hero-compact,
    .app-filter-chip-row a,
    .app-filter-trigger,
    .filters-panel,
    .app-filter-sheet,
    .app-results-toolbar,
    .app-search-save-row,
    .parts-filter-form,
    .library-search,
    .app-search-saved-button
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel) !important;
}

html[data-theme="dark"] :is(.app-filter-chip-row a.is-active, .app-filter-trigger:has(.filter-count)) {
    color: var(--fx-accent-ink);
    border-color: var(--fx-blue);
    background: var(--fx-blue) !important;
}

html[data-theme="dark"] .app-browse-layout { background: var(--fx-bg); }
html[data-theme="dark"] .app-filter-sheet :is(input, select),
html[data-theme="dark"] .app-results-toolbar select {
    color: var(--fx-text) !important;
    border-color: var(--fx-line-strong) !important;
    background: var(--fx-bg-soft) !important;
}

html[data-theme="dark"] :is(
    .app-seller-stats,
    .app-sell-type-grid button,
    .app-confidence-grid article,
    .app-preference-group,
    .app-preference-row
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

html[data-theme="dark"] .app-sell-type-grid button:hover {
    color: var(--fx-text);
    border-color: var(--fx-blue);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] .app-preference-group h2 {
    color: var(--fx-blue);
    border-color: var(--fx-line);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] :is(.app-notification-list article.is-unread, .app-preferences-note) {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: color-mix(in srgb, var(--fx-blue) 10%, var(--fx-panel));
}

html[data-theme="dark"] :is(.app-auth-route main, .form-section, .image-form-card) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
    box-shadow: var(--fx-theme-shadow);
}

html[data-theme="dark"] .app-auth-route main :is(h1, h2, h3, p, label) { color: var(--fx-text); }
html[data-theme="dark"] .app-auth-route main :is(p, label) { color: var(--fx-text-soft); }
html[data-theme="dark"] .app-auth-route main > p:first-of-type { color: var(--fx-muted); }
html[data-theme="dark"] .app-auth-route main :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-bg-soft);
}

html[data-theme="dark"] :is(.guide-detail-hero, .manifesto-hero, .parts-hero) {
    color: var(--fx-text) !important;
    background: var(--fx-panel-2) !important;
}

html[data-theme="dark"] :is(.guide-feature, .fixonic-guide-section, .section-tint) {
    color: var(--fx-text) !important;
    background: var(--fx-bg-soft) !important;
}

html[data-theme="dark"] :is(
    .policy-list > div,
    .supplier-explainer li,
    .guide-facts > div,
    .market-promo-row .market-promo-card,
    .market-promo-row .market-promo-card:nth-child(2),
    .market-promo-row .market-promo-card:nth-child(3)
) {
    color: var(--fx-text) !important;
    border-color: var(--fx-line) !important;
    background: var(--fx-panel) !important;
}

html[data-theme="dark"] :is(
    .app-sell-type-grid button,
    .app-confidence-grid article,
    .app-preference-group,
    .app-account-header,
    .app-account-metrics,
    .app-account-section,
    .app-draft-card,
    .app-saved-card,
    .app-selling-card-list article,
    .app-notification-list article,
    .app-preference-row,
    .checkout-card,
    .order-summary-card,
    .order-row,
    .payout-card,
    .project-card,
    .project-plan-section,
    .project-side-card,
    .project-form-card,
    .project-summary-strip,
    .project-compatibility-card
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

html[data-theme="dark"] :is(
    .app-wizard-shell,
    .form-progress,
    .app-wizard-progress,
    .app-selling-status-tabs,
    .app-saved-tabs
) { color: var(--fx-text); border-color: var(--fx-line); background: var(--fx-bg); }

html[data-theme="dark"] :is(
    .app-wizard-form .app-wizard-card,
    .app-wizard-form .app-choice-card,
    .app-wizard-form .app-toggle-row,
    .app-wizard-form .app-review-declarations label,
    .app-photo-uploader,
    .app-fault-options li label,
    .app-money-input,
    .app-review-list,
    .app-wizard-tip,
    .app-wizard-actions
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

html[data-theme="dark"] .app-wizard-form .app-choice-card:has(input:checked) {
    border-color: var(--fx-blue);
    background: rgba(74, 141, 255, .12);
}

html[data-theme="dark"] .app-wizard-form :is(input[type="radio"], input[type="checkbox"]) {
    border-color: var(--fx-line-strong);
    background-color: var(--fx-panel-2);
}

html[data-theme="dark"] .app-wizard-form input[type="radio"]:checked {
    border-color: var(--fx-blue);
    box-shadow: inset 0 0 0 5px var(--fx-panel);
    background: var(--fx-blue);
}

html[data-theme="dark"] .app-wizard-form input[type="checkbox"]:checked {
    border-color: var(--fx-blue);
    background-color: var(--fx-blue);
}

html[data-theme="dark"] .app-wizard-form .app-money-input,
html[data-theme="dark"] .app-wizard-form .app-money-input input,
html[data-theme="dark"] :is(.project-form-control, .project-status-select) {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-bg-soft);
}

html[data-theme="dark"] .app-wizard-form .app-money-input > span {
    color: var(--fx-muted);
    border-color: var(--fx-line);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] :is(
    .project-summary-strip > div,
    .project-source-card,
    .project-progress-panel,
    .project-picker-listing,
    .project-selected-guide,
    .project-guide-options form,
    .project-plan-item,
    .project-mini-listings a,
    .project-compatible-grid article,
    .project-checklist-item,
    .project-compatibility-result,
    .repair-project-match-list > div
) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] .project-checklist-item.is-ready {
    border-color: color-mix(in srgb, var(--fx-lime) 38%, var(--fx-line));
    background: color-mix(in srgb, var(--fx-lime) 5%, var(--fx-panel-2));
}

html[data-theme="dark"] :is(.project-checklist-item button, .project-readiness-summary span) {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-bg-soft);
}

html[data-theme="dark"] .project-checklist-item :is(p, small) { color: var(--fx-muted); }
html[data-theme="dark"] .project-readiness-summary strong { color: var(--fx-text); }

html[data-theme="dark"] .checkout-hero {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel-2);
}

html[data-theme="dark"] :is(.checkout-card, .order-summary-card) :is(h2, h3, strong, label, dt, dd, span, p) {
    color: var(--fx-text);
}

html[data-theme="dark"] :is(.checkout-card, .order-summary-card) :is(small, .helptext) {
    color: var(--fx-muted);
}

html[data-theme="dark"] .checkout-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--fx-text);
    border-color: var(--fx-line-strong) !important;
    background: var(--fx-bg-soft);
}

/* Listing detail: one palette, explicit contrast, and a smaller mobile footprint. */
.app-route-detail main,
.app-route-detail .app-product-layout,
.app-route-detail .app-product-information,
.app-route-detail .app-feed-section {
    color: var(--fx-text);
    background: var(--fx-bg) !important;
}

.app-route-detail :is(h1, h2, h3, strong, dd, .price) { color: var(--fx-text); }
.app-route-detail :is(p, small, dt, .build-note) { color: var(--fx-muted); }
.app-route-detail :is(.text-link, .app-feed-heading > a) { color: var(--fx-blue); }

.app-route-detail .app-listing-actions > a,
.app-route-detail .app-listing-actions button {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-theme-overlay);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .14);
}

.app-route-detail .app-main-image {
    color: var(--fx-muted);
    border-color: var(--fx-line);
    background: var(--fx-bg-soft) !important;
}

.app-route-detail .product-placeholder.app-main-image {
    background:
        linear-gradient(145deg, transparent 0 42%, color-mix(in srgb, var(--fx-blue) 9%, transparent) 42% 58%, transparent 58%),
        var(--fx-bg-soft) !important;
}

.app-route-detail .product-placeholder > span:first-child {
    color: var(--fx-muted);
    font-size: clamp(.8rem, 3vw, 1.05rem);
    font-weight: 800;
    letter-spacing: .14em;
}

.fx-media-fallback[hidden] { display: none !important; }

.app-main-image.has-media-error > .fx-media-fallback,
.listing-card-media.has-media-error > .fx-media-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.app-main-image.has-media-error > .fx-media-fallback {
    color: var(--fx-muted);
    background:
        linear-gradient(145deg, transparent 0 42%, color-mix(in srgb, var(--fx-blue) 9%, transparent) 42% 58%, transparent 58%),
        var(--fx-bg-soft);
    font-size: clamp(.8rem, 3vw, 1.05rem);
    font-weight: 800;
    letter-spacing: .14em;
    text-align: center;
}

.app-route-detail .app-thumbnail-row button {
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

.app-route-detail .app-thumbnail-row button.is-active { border-color: var(--fx-blue); }

.app-route-detail .app-product-summary,
.app-route-detail .app-detail-seller-identity strong { color: var(--fx-text); }
.app-route-detail .app-detail-seller-identity small { color: var(--fx-muted); }

.app-route-detail .badge {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-panel-2);
}

.app-route-detail .app-seller-message {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: transparent;
}

.app-route-detail .app-purchase-panel { color: var(--fx-text); }
.app-route-detail .purchase-price { border-color: var(--fx-line) !important; }
.app-route-detail .purchase-price span,
.app-route-detail .auction-status :is(span, small) { color: var(--fx-muted) !important; }
.app-route-detail .purchase-price strong,
.app-route-detail .auction-status strong { color: var(--fx-text) !important; }

.app-route-detail .app-purchase-panel .auction-status > div {
    color: var(--fx-text) !important;
    border-color: var(--fx-line) !important;
    background: var(--fx-panel-2) !important;
}

.app-route-detail .buy-now-form fieldset,
.app-route-detail .buy-now-form label {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

.app-route-detail .bid-form input,
.app-route-detail .app-postcode-form input,
.app-route-detail .app-owner-dispatch-location input {
    color: var(--fx-text);
    border-color: var(--fx-line-strong);
    background: var(--fx-panel);
}

.app-route-detail .app-postcode-form input::placeholder,
.app-route-detail .app-owner-dispatch-location input::placeholder { color: var(--fx-muted); }

.app-route-detail .button-buy,
.app-route-detail .bid-form .button,
.app-route-detail .app-postcode-form button,
.app-route-detail .app-owner-dispatch-location button {
    color: var(--fx-accent-ink) !important;
    border-color: var(--fx-blue) !important;
    background: var(--fx-blue) !important;
    font-weight: 900;
}

html[data-theme="light"] .app-route-detail .button-buy,
html[data-theme="light"] .app-route-detail .bid-form .button,
html[data-theme="light"] .app-route-detail .app-postcode-form button,
html[data-theme="light"] .app-route-detail .app-owner-dispatch-location button {
    color: #fff !important;
}

.app-route-detail .app-fulfilment-card {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel);
}

.app-route-detail .app-postage-line span:last-child {
    color: var(--fx-blue);
    background: color-mix(in srgb, var(--fx-blue) 13%, transparent);
}

.app-route-detail :is(
    .app-distance-line a,
    .app-estimate-explainer summary,
    .app-owner-dispatch-location summary
) { color: var(--fx-blue); }

.app-route-detail :is(
    .app-postcode-form label,
    .app-owner-dispatch-location label,
    .app-condition-row strong
) { color: var(--fx-text); }

.app-route-detail :is(
    .app-postcode-form small,
    .app-owner-dispatch-location small,
    .app-estimate-explainer p,
    .app-condition-row span
) { color: var(--fx-muted); }

.app-route-detail .app-condition-row,
.app-route-detail .app-owner-dispatch-location { border-color: var(--fx-line); }

.app-route-detail .app-watch-activity {
    color: var(--fx-text);
    background: var(--fx-panel-2);
}

.app-route-detail .app-watch-activity > span {
    color: var(--fx-bg);
    background: var(--fx-text);
}

.app-route-detail .app-live-activity--watch > span {
    color: #111827;
    background: #ffffff;
}
.app-route-detail .app-live-activity--hot > span {
    color: #fff;
    background: #e34a32;
}
.app-route-detail .app-live-activity--stock > span {
    color: #fff;
    background: #1f8a55;
}
.app-route-detail .app-live-activity--stock.is-low-stock > span {
    color: #17120b;
    background: #ffb648;
}

.app-route-detail :is(.repair-intelligence-box, .app-seller-card, .app-detail-card) {
    color: var(--fx-text) !important;
    border-color: var(--fx-line) !important;
}

html[data-theme="dark"] .app-route-detail :is(.repair-intelligence-box, .app-seller-card, .app-detail-card) {
    background: var(--fx-panel) !important;
}

.app-route-detail :is(
    .repair-intelligence-box h3,
    .app-seller-card strong,
    .app-detail-card h2,
    .app-detail-card h3,
    .status-list dd
) { color: var(--fx-text) !important; }

.app-route-detail :is(
    .repair-intelligence-box p,
    .app-seller-card small,
    .app-detail-card p,
    .status-list dt
) { color: var(--fx-muted) !important; }

html[data-theme="dark"] .app-route-detail .app-fault-disclosure {
    border-color: color-mix(in srgb, var(--fx-danger) 38%, transparent) !important;
    background: color-mix(in srgb, var(--fx-danger) 9%, var(--fx-panel)) !important;
}

.app-route-detail .tag-list span {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-panel-2);
}

.app-route-detail .app-feed-heading :is(h2, p) { color: var(--fx-text); }
.app-route-detail .app-feed-heading p { color: var(--fx-muted); }

.app-route-detail .app-listing-card { color: var(--fx-text) !important; }
.app-route-detail .app-listing-card :is(h3, h3 a, .price) { color: var(--fx-text) !important; }
.app-route-detail .app-listing-card :is(.app-card-meta, small, .delivery-note, .card-auction-line) { color: var(--fx-muted) !important; }
.app-route-detail .app-listing-card .card-auction-line strong { color: var(--fx-lime) !important; }
.app-route-detail .app-listing-card .listing-card-media { border-color: var(--fx-line); background: var(--fx-panel-2); }

.app-route-detail .app-listing-cta {
    color: var(--fx-text);
    border-color: var(--fx-line);
    background: var(--fx-theme-overlay);
    box-shadow: 0 -7px 24px rgba(0, 0, 0, .16);
    transition: opacity .18s ease, transform .18s ease;
}

.app-route-detail .app-listing-cta span { color: var(--fx-muted); }
.app-route-detail .app-listing-cta strong { color: var(--fx-text); }
.app-route-detail .app-listing-cta .button { color: var(--fx-accent-ink); background: var(--fx-blue); }
html[data-theme="light"] .app-route-detail .app-listing-cta .button { color: #fff; }

.app-route-detail .app-listing-cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 18px));
}

@media (max-width: 900px) {
    .app-route-detail main { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }

    .app-route-detail .app-main-image {
        height: clamp(260px, 78vw, 520px);
        min-height: 0;
    }

    .app-route-detail .product-placeholder.app-main-image {
        height: clamp(220px, 60vw, 340px);
    }

    .app-route-detail .app-listing-actions {
        top: max(12px, env(safe-area-inset-top));
        gap: 8px;
    }

    .app-route-detail .app-listing-actions > div { gap: 7px; }
    .app-route-detail .app-listing-actions > a,
    .app-route-detail .app-listing-actions button {
        width: 46px;
        height: 46px;
    }

    .app-route-detail .app-product-summary {
        width: min(100%, 720px);
        margin-inline: auto;
        padding-top: 20px;
    }

    .app-route-detail .app-detail-seller-identity {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .app-route-detail .auction-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .app-route-detail .app-purchase-panel .auction-status > div {
        min-height: 132px;
        display: grid;
        align-content: space-between;
        padding: 15px;
    }

    .app-route-detail .auction-status strong {
        overflow-wrap: normal;
        word-break: normal;
    }

    .app-route-detail .app-postcode-form > div,
    .app-route-detail .app-owner-dispatch-location form > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-route-detail .app-postcode-form button,
    .app-route-detail .app-owner-dispatch-location button { min-width: 112px; }

    .app-route-detail .app-seller-card {
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 13px;
        padding: 17px !important;
    }

    .app-route-detail .app-seller-card > div {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .app-route-detail .app-seller-card .app-follow-seller {
        min-width: 84px;
        margin: 0;
    }

    .app-route-detail .seller-summary-card + :is(form, a.button) { margin-top: 10px; }
    .app-route-detail .app-report-listing { margin-top: 14px; }

    .app-route-detail .app-product-information {
        width: min(100%, 720px);
        margin-inline: auto;
        padding-top: 20px;
    }

    .app-route-detail .app-similar-feed,
    .app-route-detail .app-related-guides { padding-bottom: 38px; }

    .app-route-detail .app-product-rail {
        padding-inline: var(--fx-mobile-page-gutter);
        scroll-padding-inline: var(--fx-mobile-page-gutter);
    }

    .app-route-detail .app-listing-cta {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .app-route-detail .app-listing-actions > a,
    .app-route-detail .app-listing-actions button {
        width: 42px;
        height: 42px;
    }

    .app-route-detail .app-detail-seller-identity {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .app-route-detail .app-detail-seller-identity :is(form, .app-seller-message) {
        grid-column: 1 / -1;
        width: 100%;
    }

    .app-route-detail .app-detail-seller-identity form .app-seller-message { width: 100%; }

    .app-route-detail .app-postcode-form > div,
    .app-route-detail .app-owner-dispatch-location form > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-route-detail .app-postcode-form button,
    .app-route-detail .app-owner-dispatch-location button { width: 100%; }

    .app-route-detail .app-seller-card {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .app-route-detail .app-seller-card .app-follow-seller {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 350px) {
    .app-route-detail .auction-status { grid-template-columns: minmax(0, 1fr); }
    .app-route-detail .app-purchase-panel .auction-status > div { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-route-detail .app-listing-cta { transition: none; }
}


/* Marketplace search: SmartSearch contrast + spacing contract.
 * The light marketplace sheet previously forced a pale #eef3ff panel even when
 * the active theme was dark, leaving the inherited white heading unreadable.
 */
.app-route-browse .browse-results > .repair-intelligence-box {
    margin: 0 0 18px;
    padding: 22px 24px;
    border-radius: 18px;
}

.app-route-browse .browse-results > .repair-intelligence-box .eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--fx-cyan);
    font-weight: 800;
    letter-spacing: .14em;
}

.app-route-browse .browse-results > .repair-intelligence-box h2 {
    margin: 0 0 14px;
    color: var(--fx-text) !important;
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.22;
}

.app-route-browse .browse-results > .repair-intelligence-box p {
    margin: 0;
    color: var(--fx-text-soft) !important;
    line-height: 1.55;
}

.app-route-browse .browse-results > .repair-intelligence-box p strong {
    color: var(--fx-text) !important;
}

.app-route-browse .browse-results > .repair-intelligence-box small {
    display: block;
    margin-top: 12px;
    color: var(--fx-muted) !important;
    line-height: 1.5;
}

html[data-theme="dark"] .app-route-browse .browse-results > .repair-intelligence-box {
    color: var(--fx-text) !important;
    border-color: var(--fx-line-strong) !important;
    background: var(--fx-panel) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

html[data-theme="light"] .app-route-browse .browse-results > .repair-intelligence-box {
    color: var(--fx-text) !important;
    border-color: #bfd0ff !important;
    background: #eef3ff !important;
}

@media (max-width: 900px) {
    .app-route-browse .browse-results > .repair-intelligence-box {
        margin: 18px 0 20px;
        padding: 20px 18px;
    }

    .app-route-browse .beta-search-save-row {
        gap: 16px;
        margin: 0 0 22px;
        padding: 16px;
        border-radius: 18px;
    }

    .app-route-browse .beta-search-save-row > * {
        min-width: 0;
    }

    .app-route-browse .beta-search-save-row .app-search-saved-button {
        min-height: 48px;
    }

    .app-route-browse .app-results-toolbar {
        margin: 0 0 22px;
    }
}