/*
 * Market Watch public styles.
 *
 * Styles the market analysis landing page, product detail views, compact GPU
 * spec-page panels, price-lane cards, mini charts, and homepage spotlight.
 */
.ncmw-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #101720, #0b0f14);
    color: #f4f7fb;
}

.ncmw-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(18deg, transparent 46%, rgba(35, 136, 255, .09) 47%, rgba(35, 136, 255, .09) 47.6%, transparent 48.6%),
        linear-gradient(9deg, transparent 62%, rgba(35, 136, 255, .06) 63%, rgba(35, 136, 255, .06) 63.5%, transparent 64.5%);
    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
    mask-image: linear-gradient(to right, black, transparent 75%);
}

/* Compact masthead: matches the shared utility masthead scale in
   design-system.css instead of the old 515px hero band. */
.ncmw-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(1.25rem, 4vw, 2.5rem);
    align-items: center;
    padding-block: var(--nc-masthead-pad, clamp(1.5rem, 2.6vw, 2.25rem));
}

.ncmw-hero h1 {
    max-width: 820px;
    margin: 0 0 0.45rem;
    color: var(--nc-text-strong, #d8dfda);
    font-size: var(--nc-utility-h1, clamp(1.75rem, 2.6vw, 2.5rem));
    line-height: 1.12;
}

.ncmw-hero p {
    max-width: 760px;
    margin: 0;
    color: #c7d0da;
    font-size: 0.98rem;
    line-height: 1.55;
}

/* One-line trust statement in the hero; the full methodology and legend
   live in .ncmw-market-details disclosures at the bottom of the page. */
.ncmw-hero__trust {
    max-width: 760px;
    margin: 0;
    align-self: end;
    color: #9aa7b4;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Shared closed-by-default disclosure (methodology, legend). The explicit
   :not([open]) guard keeps the body hidden even if a display override on
   the container would defeat native <details> collapsing. */
.ncmw-market-details {
    margin-top: 1.25rem;
    border: 1px solid rgba(118, 185, 0, 0.28);
    border-radius: 8px;
    background: rgba(18, 25, 35, 0.6);
    padding: 0.7rem 1rem;
    color: #dce5ee;
}

.ncmw-market-details > summary {
    color: var(--nc-text-strong, #d8dfda);
    cursor: pointer;
    font-weight: 800;
    font-size: 0.92rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ncmw-market-details > summary::-webkit-details-marker {
    display: none;
}

.ncmw-market-details > summary::before {
    content: '';
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.15s ease;
}

.ncmw-market-details[open] > summary::before {
    transform: rotate(90deg);
}

.ncmw-market-details:not([open]) > *:not(summary) {
    display: none !important;
}

.ncmw-market-details__body {
    margin-top: 0.65rem;
}

.ncmw-market-details__body p {
    margin: 0 0 0.5rem;
    color: #c7d0da;
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .ncmw-market-details > summary::before {
        transition: none;
    }
}

.ncmw-hero--product .ncmw-hero__inner {
    display: block;
    padding-block: var(--nc-masthead-pad, clamp(1.5rem, 2.6vw, 2.25rem));
}

.ncmw-hero--product h1 {
    max-width: 1000px;
    font-size: var(--nc-utility-h1, clamp(1.75rem, 2.6vw, 2.5rem));
}

.ncmw-market {
    padding: clamp(1.25rem, 2.4vw, 2rem) 0;
}

.ncmw-market-search {
    display: grid;
    gap: 0.42rem;
    max-width: 720px;
    margin: 0 0 1rem;
}

.ncmw-market-search label {
    color: #465462;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ncmw-market-search__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.ncmw-market-search input[type="search"] {
    min-width: 0;
    width: 100%;
    border: 1px solid #cfd9e2;
    border-radius: 6px;
    background: #fff;
    color: #102633;
    font-size: 0.98rem;
    font-weight: 800;
    padding: 0.62rem 0.75rem;
}

.ncmw-market-search input[type="search"]:focus {
    border-color: #63b821;
    box-shadow: 0 0 0 3px rgba(99, 184, 33, 0.16);
    outline: 0;
}

.ncmw-market-search button {
    border: 1px solid #102633;
    border-radius: 6px;
    background: #102633;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    padding: 0.62rem 0.9rem;
}

.ncmw-market-search button:hover,
.ncmw-market-search button:focus {
    background: #63b821;
    border-color: #63b821;
    color: #061107;
}

.ncmw-market-search__suggestions {
    position: absolute;
    top: calc(100% + 0.32rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #d9e1e8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(11, 15, 20, 0.16);
    list-style: none;
    margin: 0;
    padding: 0.28rem;
}

.ncmw-market-search__suggestions[hidden] {
    display: none;
}

.ncmw-market-search__suggestions li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    border-radius: 4px;
    color: #102633;
    cursor: pointer;
    padding: 0.48rem 0.55rem;
}

.ncmw-market-search__suggestions li[aria-selected="true"],
.ncmw-market-search__suggestions li:hover,
.ncmw-market-search__suggestions li:focus {
    background: #eef8e8;
}

.ncmw-market-search__suggestions strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ncmw-market-search__suggestions span {
    flex: 0 0 auto;
    color: #6a7785;
    font-size: 0.78rem;
    font-weight: 900;
}

.ncmw-popular-pills {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.ncmw-popular-pills__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
    color: #6a7785;
    font-size: 0.82rem;
}

.ncmw-popular-pills__head strong {
    color: #102633;
    font-size: 0.86rem;
    font-weight: 900;
}

.ncmw-popular-pills__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
}

.ncmw-popular-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    max-width: 100%;
    border: 1px solid #c8d6e0;
    border-radius: 999px;
    background: #fff;
    color: #102633;
    padding: 0.3rem 0.62rem 0.3rem 0.36rem;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(11, 15, 20, 0.05);
}

.ncmw-popular-pill:hover,
.ncmw-popular-pill:focus {
    border-color: #63b821;
    background: #eef8e8;
    color: #102633;
}

.ncmw-popular-pill span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: #102633;
    color: #fff;
    padding: 0.14rem 0.42rem;
    font-size: 0.7rem;
    font-weight: 900;
}

.ncmw-popular-pill strong {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(26ch, 55vw);
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ncmw-popular-pill b {
    flex: 0 0 auto;
    margin-left: auto;
    color: #2d7d19;
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}

.ncmw-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.ncmw-filter-row a {
    border: 1px solid #d9e1e8;
    border-radius: 6px;
    background: #fff;
    color: #102633;
    padding: 0.48rem 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.ncmw-filter-row a.is-active,
.ncmw-filter-row a:hover,
.ncmw-filter-row a:focus {
    border-color: #63b821;
    background: #63b821;
    color: #061107;
}

.ncmw-filter-row--regions {
    margin-top: -0.65rem;
}

.ncmw-filter-row--regions a {
    font-size: 0.88rem;
    padding: 0.38rem 0.62rem;
}

.ncmw-tax-note {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    align-items: center;
    border: 1px solid #d9e1e8;
    border-left: 4px solid #48a6a7;
    border-radius: 8px;
    background: #f8fafc;
    color: #425363;
    padding: 0.75rem 0.9rem;
    margin: 0 0 1rem;
}

.ncmw-tax-note__copy {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.ncmw-tax-note__copy strong {
    flex: 0 0 auto;
    color: #102633;
}

.ncmw-tax-legend {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.ncmw-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.72rem;
}

.ncmw-product-detail {
    display: grid;
    gap: 1rem;
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
    color: #102633;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 28px rgba(11, 15, 20, 0.08);
}

.ncmw-product-detail__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.ncmw-product-detail__head h2 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1.1;
}

@media (max-width: 689px) {
    .ncmw-hero__inner {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        min-height: auto;
        padding-block: 1.5rem 1.25rem;
    }

    .ncmw-hero h1 {
        margin-bottom: 0.55rem;
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.12;
    }

    .ncmw-hero p {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .ncmw-market {
        padding-top: 1rem;
    }

    /* Popular price checks stay one compact scrollable strip on phones. */
    .ncmw-popular-pills__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .ncmw-popular-pills__list .ncmw-popular-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ncmw-product-detail {
        gap: 0.75rem;
        padding: 0.8rem;
    }

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

    .ncmw-popular-pills__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .ncmw-popular-pill {
        flex: 0 0 auto;
    }
}

/* Overview cards use vendor identity on the frame, not on every price label. */
.ncmw-page .ncmw-product-market-card {
    --ncmw-vendor-accent: #64748b;
    border-top: 3px solid var(--ncmw-vendor-accent);
}

.ncmw-page .ncmw-product-market-card--vendor-nvidia { --ncmw-vendor-accent: #76b900; }
.ncmw-page .ncmw-product-market-card--vendor-amd { --ncmw-vendor-accent: #e2231a; }
.ncmw-page .ncmw-product-market-card--vendor-ati { --ncmw-vendor-accent: #b00020; }
.ncmw-page .ncmw-product-market-card--vendor-intel { --ncmw-vendor-accent: #0071c5; }

.ncmw-page .ncmw-product-market-card:hover,
.ncmw-page .ncmw-product-market-card:focus-within {
    border-color: var(--ncmw-vendor-accent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ncmw-vendor-accent) 18%, transparent);
}

.ncmw-page .ncmw-product-market-card--compact:hover h2,
.ncmw-page .ncmw-product-market-card--compact:focus-within h2 {
    color: var(--ncmw-vendor-accent);
}

.ncmw-market-overview-note {
    margin: 1rem 0 0.85rem;
    color: #7b8a99;
    font-size: 0.88rem;
    font-weight: 650;
}

.ncmw-summary-grid--overview {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.8rem;
}

/* Price states are supporting text. They should not compete with the card title,
   selected-region median, and vendor accent. The row never wraps: New asking
   and Used asking stay on one line whatever the digit count, and if a price
   ever outgrows the card the last entry clips with an ellipsis instead of
   breaking onto a second line. */
.ncmw-compact-price-summary {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: #7b8a99;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.35;
}

.ncmw-compact-price-summary span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ncmw-compact-price-summary span:last-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ncmw-compact-price-summary span:not(:last-child)::after {
    content: '·';
    margin-left: 0.45rem;
    color: #556474;
}

.ncmw-product-detail__head p {
    margin: 0;
    color: #6a7785;
}

.ncmw-subtle-link {
    flex: 0 0 auto;
    border: 1px solid #d9e1e8;
    border-radius: 6px;
    background: #f8fafc;
    color: #102633;
    padding: 0.45rem 0.65rem;
    font-weight: 800;
    text-decoration: none;
}

.ncmw-subtle-link:hover,
.ncmw-subtle-link:focus {
    border-color: #63b821;
    color: #2d7d19;
}

.ncmw-product-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.ncmw-product-kpis div {
    display: grid;
    gap: 0.25rem;
    border: 1px solid #e6ecf2;
    border-radius: 6px;
    background: #f8fafc;
    padding: 0.65rem;
}

.ncmw-product-kpis span {
    color: #6a7785;
    font-size: 0.78rem;
    font-weight: 800;
}

.ncmw-product-kpis strong {
    font-size: 1.1rem;
}

.ncmw-source-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    color: #6a7785;
    font-size: 0.86rem;
}

.ncmw-source-strip b {
    border: 1px solid #d9e1e8;
    border-radius: 999px;
    background: #fff;
    color: #102633;
    padding: 0.2rem 0.5rem;
}

.ncmw-summary-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
    color: #102633;
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(11, 15, 20, 0.08);
}

.ncmw-clickable-card {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ncmw-clickable-card:hover,
.ncmw-clickable-card:focus {
    border-color: #63b821;
    box-shadow: 0 14px 34px rgba(11, 15, 20, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.ncmw-clickable-card:focus-visible {
    outline: 3px solid rgba(99, 184, 33, 0.35);
    outline-offset: 3px;
}

.ncmw-card-top,
.ncmw-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.ncmw-component-pill,
.ncmw-region-pill,
.ncmw-tax-pill,
.ncmw-trend,
.ncmw-popularity-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 0.24rem 0.58rem;
    font-size: 0.78rem;
    font-weight: 900;
}

/*
 * Popularity as a badge rather than a raw count: "Trending" is the accent
 * color used for the strongest real signal on the site (top ~20% of products
 * with any recorded interest); "Popular" is everything else with nonzero
 * interest, styled quieter so it does not compete with "Trending" for
 * attention. Zero renders as a plain dash elsewhere, not a badge.
 */
.ncmw-popularity-badge.is-trending {
    background: var(--ncmw-accent);
    color: #06210a;
}

.ncmw-popularity-badge.is-popular {
    background: transparent;
    color: var(--ncmw-text-secondary);
    border: 1px solid var(--ncmw-border);
}

/*
 * Smaller than the shared pill base inside this specific dense table row: the
 * default 28px min-height reads oversized next to plain text values like
 * "51" and "$1,584" in the neighbouring cells of the same row.
 */
.ncmw-price-row__popularity .ncmw-popularity-badge {
    min-height: 0;
    padding: 0.14rem 0.5rem;
    font-size: 0.72rem;
}

.ncmw-component-pill {
    background: #102633;
    color: #fff;
}

.ncmw-region-pill {
    background: #e9eef3;
    color: #102633;
}

.ncmw-tax-pill {
    background: #ecf8f7;
    color: #176b6c;
}

.ncmw-tax-pill--tax-excluded {
    background: #fff7df;
    color: #7a4f00;
}

.ncmw-tax-pill--vat-included,
.ncmw-tax-pill--tax-included {
    background: #e8f6df;
    color: #255f14;
}

.ncmw-tax-pill--mixed {
    background: #eef3f6;
    color: #465462;
}

.ncmw-tax-pill--unknown {
    background: #f7fafc;
    color: #6a7785;
}

.ncmw-summary-card h2 {
    margin: 0;
    color: #102633;
    font-size: 1.15rem;
    line-height: 1.25;
}

.ncmw-summary-card:hover h2,
.ncmw-summary-card:focus h2 {
    color: #2d7d19;
}

.ncmw-product-market-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
    color: #102633;
    padding: 1rem;
    box-shadow: 0 10px 28px rgba(11, 15, 20, 0.08);
}

/* Price lanes keep retail, active used listings, sold listings, and refurbished
   samples visually distinct while retaining equal-height card layouts. */
.ncmw-product-market-card__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
}

.ncmw-product-market-card__head h2 {
    margin: 0;
    color: #102633;
    font-size: 1.15rem;
    line-height: 1.25;
}

.ncmw-product-market-card:hover .ncmw-product-market-card__head h2,
.ncmw-product-market-card:focus .ncmw-product-market-card__head h2 {
    color: #2d7d19;
}

.ncmw-market-sample-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef3f6;
    color: #425363;
    padding: 0.22rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.ncmw-product-market-card--compact {
    gap: 0.55rem;
    min-height: 0;
    padding: 0.72rem;
}

.ncmw-product-market-card--compact .ncmw-card-top {
    gap: 0.35rem;
}

.ncmw-product-market-card--compact .ncmw-component-pill,
.ncmw-product-market-card--compact .ncmw-region-pill {
    min-height: 22px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem;
}

.ncmw-product-market-card--compact h2 {
    margin: 0;
    color: #102633;
    font-size: 0.98rem;
    line-height: 1.22;
}

.ncmw-product-market-card--compact:hover h2,
.ncmw-product-market-card--compact:focus h2 {
    color: #2d7d19;
}

.ncmw-compact-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    /* The row renders as an inset box on the dark theme; without padding the
       tax pill sat flush against the box edge. */
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
}

.ncmw-updated-note {
    color: var(--ncmw-text-muted, #6a7785);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.ncmw-compact-price-row div {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.ncmw-compact-price-row span {
    color: #6a7785;
    font-size: 0.72rem;
    font-weight: 900;
}

.ncmw-compact-price-row strong {
    color: #102633;
    font-size: 1.28rem;
    font-weight: 950;
    line-height: 1;
}

.ncmw-compact-price-row .ncmw-tax-pill {
    min-height: 22px;
    padding: 0.14rem 0.42rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

.ncmw-compact-lanes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.ncmw-compact-lane {
    display: inline-flex;
    gap: 0.32rem;
    align-items: baseline;
    border-left: 3px solid #8392a0;
    border-radius: 4px;
    background: #f8fafc;
    color: #425363;
    padding: 0.22rem 0.36rem;
    font-size: 0.72rem;
    font-weight: 900;
}

.ncmw-compact-lane--new-retail {
    border-left-color: #2d7d19;
}

.ncmw-compact-lane--new-asking {
    border-left-color: #48a6a7;
}

.ncmw-compact-lane--used-asking {
    border-left-color: #f59e0b;
}

.ncmw-compact-lane--used-sold {
    border-left-color: #6d5bd0;
}

.ncmw-compact-lane--refurbished {
    border-left-color: #64748b;
}

.ncmw-compact-lane b {
    color: #102633;
}

.ncmw-compact-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    border-top: 1px solid #e6ecf2;
    color: #6a7785;
    padding-top: 0.55rem;
    font-size: 0.72rem;
    font-weight: 850;
}

.ncmw-compact-card-meta > span:not(.ncmw-trend) {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

.ncmw-compact-card-meta .ncmw-trend {
    min-height: 22px;
    padding: 0.14rem 0.42rem;
    font-size: 0.68rem;
}

.ncmw-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.ncmw-card-stats div {
    min-width: 0;
}

.ncmw-card-stats dt {
    color: #6a7785;
    font-size: 0.78rem;
    font-weight: 800;
}

.ncmw-card-stats dd {
    margin: 0.1rem 0 0;
    font-size: 1.04rem;
    font-weight: 900;
}

.ncmw-card-meta {
    border-top: 1px solid #d9e1e8;
    padding-top: 0.75rem;
    color: #566371;
    font-size: 0.88rem;
}

.ncmw-chart-stack {
    display: grid;
    gap: 0.65rem;
}

.ncmw-mini-chart {
    display: grid;
    gap: 0.35rem;
    border: 1px solid #e6ecf2;
    border-radius: 6px;
    background: #f8fafc;
    padding: 0.65rem;
}

.ncmw-mini-chart__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    color: #465462;
    font-size: 0.82rem;
    font-weight: 800;
}

.ncmw-mini-chart__head strong {
    color: #102633;
    white-space: nowrap;
}

.ncmw-mini-chart small {
    color: #6a7785;
}

.ncmw-msrp-bar,
.ncmw-range-bar {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: #e6ecf2;
    overflow: hidden;
}

/* The mini charts are CSS-only summaries. PHP writes the percentages as custom
   properties so no public charting dependency is required. */
.ncmw-msrp-bar__axis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #102633;
    opacity: 0.42;
    transform: translateX(-1px);
    z-index: 2;
}

.ncmw-msrp-bar__fill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: var(--ncmw-msrp-width);
    border-radius: 999px;
    background: #63b821;
}

.ncmw-mini-chart--msrp.is-above .ncmw-msrp-bar__fill {
    left: 50%;
    background: #f59e0b;
}

.ncmw-mini-chart--msrp.is-below .ncmw-msrp-bar__fill {
    right: 50%;
    background: #63b821;
}

.ncmw-trend.is-up {
    background: #fff4d7;
    color: #7a4f00;
}

.ncmw-trend.is-down {
    background: #e8f6df;
    color: #255f14;
}

.ncmw-trend.is-flat {
    background: #e9eef3;
    color: #465462;
}

/* MSRP pill within +/-3% of launch price. */
.ncmw-trend.is-near {
    background: #e4f3d8;
    color: #2f6414;
}

/* Pills inside the detail-page KPI tiles sit where a large value would,
   so they get a step up from the card-meta pill size. */
.ncmw-product-kpis .ncmw-trend {
    font-size: 0.92rem;
}

/* The updated-age line pins to the card's bottom edge in the flex column,
   whatever the content height above it; right-aligned so it reads as a
   quiet corner stamp against the left-aligned stats. */
.ncmw-compact-updated {
    margin: auto 0 0;
    text-align: right;
}

.ncmw-observations {
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.ncmw-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.ncmw-section-head h2 {
    margin: 0;
}

.ncmw-table-wrap {
    overflow-x: auto;
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
}

.ncmw-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.ncmw-table th,
.ncmw-table td {
    border-bottom: 1px solid #e6ecf2;
    padding: 0.72rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

.ncmw-table th {
    background: #f5f7fa;
    color: #465462;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.ncmw-table tr:last-child td {
    border-bottom: 0;
}

.ncmw-disclaimer,
.ncmw-empty p {
    color: #6a7785;
}

.ncmw-market-legend {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 0.8rem 1rem;
    border-top: 1px solid #d9e1e8;
    color: #6a7785;
    font-size: 0.73rem;
    line-height: 1.45;
    margin-top: clamp(1.4rem, 3vw, 2.25rem);
    padding-top: 0.85rem;
}

.ncmw-market-legend__group {
    display: grid;
    gap: 0.42rem;
    align-content: start;
}

.ncmw-market-legend strong {
    color: #465462;
    font-size: 0.76rem;
}

.ncmw-market-legend ul {
    display: grid;
    gap: 0.28rem 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.ncmw-market-legend li {
    display: flex;
    gap: 0.38rem;
    min-width: 0;
}

.ncmw-market-legend b {
    color: #465462;
    font-weight: 900;
}

.ncmw-market-legend p {
    margin: 0;
}

.ncmw-market-legend__swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 2px;
    margin-top: 0.25rem;
    background: #8392a0;
}

.ncmw-market-legend__swatch--new-retail {
    background: #2d7d19;
}

.ncmw-market-legend__swatch--new-asking {
    background: #48a6a7;
}

.ncmw-market-legend__swatch--used-asking {
    background: #f59e0b;
}

.ncmw-market-legend__swatch--used-sold {
    background: #6d5bd0;
}

.ncmw-market-legend__swatch--refurbished {
    background: #64748b;
}

.ncmw-market-legend__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.ncmw-market-legend__fineprint {
    grid-column: 1 / -1;
    color: #82909e;
    font-size: 0.7rem;
}

.ncmw-empty {
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
    padding: 1.2rem;
}

.ncmw-home-spotlight {
    container: ncmw-home-spotlight / inline-size;
    background:
        linear-gradient(135deg, rgba(118, 185, 0, 0.18), transparent 36%),
        linear-gradient(180deg, #0f1620, #101720);
    color: #f4f7fb;
    padding: clamp(1.5rem, 4vw, 2.75rem) 0;
}

.ncmw-home-spotlight__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
    gap: clamp(1rem, 4vw, 2rem);
    align-items: center;
}

.ncmw-home-spotlight h2 {
    margin: 0 0 0.65rem;
    color: var(--nc-text-strong, #d8dfda);
    font-size: clamp(1.6rem, 3vw, 2.45rem);
    line-height: 1.1;
}

.ncmw-home-spotlight__copy,
.ncmw-home-spotlight__cards {
    min-width: 0;
}

.ncmw-home-spotlight p {
    max-width: 760px;
    margin: 0 0 1rem;
    color: #c7d0da;
}

.ncmw-home-spotlight__cards {
    display: grid;
    gap: 0.65rem;
}

.ncmw-home-spotlight__cards a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    padding: 0.75rem;
    text-decoration: none;
}

.ncmw-home-spotlight__cards span,
.ncmw-home-spotlight__cards small {
    min-width: 0;
}

.ncmw-home-spotlight__cards strong {
    grid-row: span 2;
    align-self: center;
    color: #b8f274;
}

.ncmw-home-spotlight__cards small {
    color: #c7d0da;
}

/* The homepage may place this component inside half of the viewport. Stack by
   the component's width so its copy never competes with a fixed card track. */
@container ncmw-home-spotlight (max-width: 50rem) {
    .ncmw-home-spotlight__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ncmw-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid #63b821;
    border-radius: 6px;
    background: #63b821;
    color: #061107;
    padding: 0.55rem 0.85rem;
    font-weight: 900;
    text-decoration: none;
}

.ncmw-link-button:hover,
.ncmw-link-button:focus {
    background: #7dd63a;
    color: #061107;
}

.ncmw-gpu-panel {
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    background: #fff;
    color: #102633;
    margin: 1.25rem 0 0;
    padding: 0;
}

.ncmw-gpu-panel__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: start;
}

.ncmw-gpu-market-details {
    min-width: 0;
}

.ncmw-gpu-market-summary {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    min-height: 58px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.ncmw-gpu-market-summary::-webkit-details-marker {
    display: none;
}

.ncmw-gpu-market-summary::before {
    content: "\25B8";
    display: inline-flex;
    flex: 0 0 1.7rem;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid #b8d9b0;
    border-radius: 999px;
    background: #eef8eb;
    color: #2d7d19;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ncmw-gpu-market-summary:hover::before,
.ncmw-gpu-market-summary:focus-visible::before {
    border-color: #63b821;
    background: #63b821;
    color: #fff;
}

.ncmw-gpu-market-details[open] > .ncmw-gpu-market-summary::before {
    transform: rotate(90deg);
}

.ncmw-gpu-market-summary__title {
    flex: 1 1 auto;
    color: #102633;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.25;
}

.ncmw-gpu-market-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef3f6;
    color: #425363;
    padding: 0.22rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.ncmw-gpu-market-pill--muted {
    background: #f7fafc;
    color: #6a7785;
}

.ncmw-gpu-market-link {
    align-self: center;
    justify-self: end;
    margin-right: 1rem;
    border: 1px solid #63b821;
    border-radius: 6px;
    background: #63b821;
    color: #061107;
    padding: 0.48rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.ncmw-gpu-market-link:hover,
.ncmw-gpu-market-link:focus {
    background: #7dd63a;
    color: #061107;
}

.ncmw-gpu-market-detail-body {
    padding: 0 1rem 1rem;
}

.ncmw-gpu-market-details:not([open]) > .ncmw-gpu-market-detail-body {
    display: none !important;
}

.ncmw-gpu-panel__intro {
    max-width: 62ch;
    margin: 0 0 0.8rem;
    color: #6a7785;
    font-size: 0.9rem;
}

.ncmw-gpu-panel__listings {
    display: grid;
    gap: 0.55rem;
}

.ncmw-gpu-listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid #e6ecf2;
    border-radius: 6px;
    background: #fff;
    padding: 0.7rem;
}

.ncmw-gpu-listing__main,
.ncmw-gpu-listing__price {
    display: grid;
    gap: 0.16rem;
}

.ncmw-gpu-listing__main {
    min-width: 0;
}

.ncmw-gpu-listing__main strong,
.ncmw-gpu-listing__main a {
    color: #102633;
}

.ncmw-gpu-listing__main span,
.ncmw-gpu-listing__main small,
.ncmw-gpu-listing__price span {
    color: #6a7785;
}

.ncmw-gpu-listing__price {
    justify-items: end;
    text-align: right;
}

.ncmw-gpu-listing__price strong {
    font-size: 1.05rem;
}

.ncmw-menu-item > a {
    min-height: 36px;
}

@media (max-width: 820px) {
    .ncmw-hero__inner,
    .ncmw-home-spotlight__inner {
        grid-template-columns: 1fr;
    }

    .ncmw-card-stats {
        grid-template-columns: 1fr;
    }

    .ncmw-market-legend,
    .ncmw-market-legend ul {
        grid-template-columns: 1fr;
    }

    .ncmw-product-detail__head {
        display: grid;
    }

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

    .ncmw-gpu-panel__shell,
    .ncmw-gpu-listing {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ncmw-gpu-market-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ncmw-gpu-market-summary__title {
        flex-basis: calc(100% - 2.3rem);
    }

    .ncmw-gpu-market-link {
        justify-self: start;
        margin: 0 1rem 1rem;
    }

    .ncmw-gpu-listing__price {
        justify-items: start;
        text-align: left;
    }

    .ncmw-tax-note {
        display: grid;
    }
}

@media (max-width: 520px) {
    .ncmw-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ncmw-popular-pill {
        width: 100%;
    }

    .ncmw-product-kpis {
        grid-template-columns: 1fr;
    }

    .ncmw-product-market-card__head {
        display: grid;
    }

    .ncmw-market-search__box {
        grid-template-columns: 1fr;
    }

    .ncmw-market-search__suggestions {
        max-height: 260px;
    }

    .ncmw-market-search__suggestions li {
        display: grid;
        gap: 0.12rem;
    }

}

/* Final mobile overrides keep discovery controls compact and horizontally
   scannable after the legacy narrow-screen rules above. */
@media (max-width: 689px) {
    .ncmw-popular-pill {
        width: auto;
    }

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

/*
 * PC Tech Vault dark dashboard integration (0.1.11).
 *
 * The plugin keeps layout and market semantics here while consuming the child
 * theme's shared product tokens with self-contained fallbacks.
 */

/* Token scope. The plugin paints two independent surfaces: the Market Watch
   pages (.ncmw-page) and the market panel embedded in every GPU wiki entry
   (.ncmw-gpu-panel), which renders inside the theme's single-gpu template with
   no .ncmw-page ancestor. Both entry points must declare the token set, or the
   dark rules below resolve to an invalid value on the GPU entry and the legacy
   light declarations show through. */
.ncmw-page,
.ncmw-gpu-panel {
    --ncmw-bg: var(--nc-bg, #090c0a);
    --ncmw-surface-1: var(--nc-surface-1, #111613);
    --ncmw-surface-2: var(--nc-surface-2, #171d19);
    --ncmw-surface-3: var(--nc-surface-3, #1d2520);
    --ncmw-surface-inset: var(--nc-surface-inset, #0c100d);
    --ncmw-border: var(--nc-border, #2d3730);
    --ncmw-border-strong: var(--nc-border-strong, #3b493f);
    --ncmw-text: var(--nc-text, #e8ede9);
    --ncmw-text-strong: var(--nc-text-strong, #f4f7f5);
    --ncmw-text-secondary: var(--nc-text-secondary, #aeb9b1);
    --ncmw-text-muted: var(--nc-text-muted, #89958d);
    --ncmw-accent: var(--nc-accent, #2388ff);
    --ncmw-up: var(--nc-market-up, #f5a524);
    --ncmw-down: var(--nc-market-down, #38bfc4);
    --ncmw-flat: var(--nc-market-flat, #a78bfa);
}

.ncmw-page {
    background: var(--ncmw-bg);
    color: var(--ncmw-text);
}

.ncmw-hero {
    border-bottom: 1px solid var(--ncmw-border);
    background:
        radial-gradient(circle at 82% 18%, rgba(35, 136, 255, 0.1), transparent 26%),
        linear-gradient(135deg, #121914, #080b09 70%);
    color: var(--ncmw-text);
}

.ncmw-hero h1,
.ncmw-hero p,
.ncmw-product-detail__head h2,
.ncmw-section-head h2,
.ncmw-product-market-card__head h2,
.ncmw-summary-card h2 {
    color: var(--ncmw-text-strong);
}

.ncmw-hero p,
.ncmw-product-detail__head p,
.ncmw-section-head p {
    color: var(--ncmw-text-secondary);
}

.ncmw-hero__trust {
    color: var(--ncmw-text-muted);
}

.ncmw-market-details {
    border: 1px solid var(--ncmw-border-strong);
    background: rgba(17, 22, 19, 0.78);
    color: var(--ncmw-text-secondary);
}

.ncmw-market-details > summary {
    color: var(--ncmw-text);
}

.ncmw-market-details__body p {
    color: var(--ncmw-text-secondary);
}

/* Detail-page lane medians and the bottom discovery block. */
.ncmw-lane-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0;
}

.ncmw-lane-row__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 132px;
    border: 1px solid var(--ncmw-border);
    border-left-width: 3px;
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-1);
    padding: 0.5rem 0.8rem;
}

.ncmw-lane-row__item span {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ncmw-text-muted);
}

.ncmw-lane-row__item strong {
    font-size: 1.05rem;
    color: var(--ncmw-text-strong);
}

.ncmw-lane-row__item small {
    font-size: 0.74rem;
    color: var(--ncmw-text-muted);
}

/* Accent colors match the legend swatches so "Lane colors" stays true. */
.ncmw-lane-row__item--new-retail {
    border-left-color: #2d7d19;
}

.ncmw-lane-row__item--new-asking {
    border-left-color: #48a6a7;
}

.ncmw-lane-row__item--used-asking {
    border-left-color: #f59e0b;
}

.ncmw-lane-row__item--used-sold {
    border-left-color: #6d5bd0;
}

.ncmw-lane-row__item.is-empty {
    opacity: 0.62;
}

.ncmw-lane-row__item.is-empty strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ncmw-text-muted);
}

.ncmw-market-discovery {
    margin-top: 1.5rem;
    border-top: 1px solid var(--ncmw-border);
    padding-top: 1rem;
}

.ncmw-market-discovery__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: var(--ncmw-text-strong);
}

.ncmw-market {
    background: var(--ncmw-bg);
    color: var(--ncmw-text);
}

.ncmw-market-search label,
.ncmw-popular-pills__head,
.ncmw-product-kpis span,
.ncmw-market-legend,
.ncmw-disclaimer {
    color: var(--ncmw-text-muted);
}

.ncmw-market-search__box {
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-1);
}

.ncmw-market-search input[type="search"] {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-inset);
    color: var(--ncmw-text);
}

.ncmw-market-search input[type="search"]::placeholder {
    color: var(--ncmw-text-muted);
}

.ncmw-market-search input[type="search"]:focus {
    border-color: var(--nc-focus, #c4f879);
    box-shadow: 0 0 0 3px rgba(196, 248, 121, 0.15);
}

.ncmw-market-search button,
.ncmw-link-button {
    border: 1px solid var(--ncmw-accent);
    background: var(--ncmw-accent);
    color: #081006;
}

.ncmw-market-search button:hover,
.ncmw-link-button:hover {
    border-color: var(--nc-link-hover, #91caff);
    background: var(--nc-link-hover, #91caff);
    color: #071000;
}

.ncmw-market-search__suggestions {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-2);
    box-shadow: var(--nc-shadow-md, 0 20px 50px rgba(0, 0, 0, 0.28));
}

.ncmw-market-search__suggestions li {
    border-color: var(--ncmw-border);
    background: transparent;
    color: var(--ncmw-text-secondary);
}

.ncmw-market-search__suggestions li:hover,
.ncmw-market-search__suggestions li:focus,
.ncmw-market-search__suggestions li[aria-selected="true"] {
    background: var(--ncmw-surface-3);
    color: var(--ncmw-text-strong);
}

.ncmw-market-search__suggestions strong,
.ncmw-popular-pill strong {
    color: var(--ncmw-text-strong);
}

.ncmw-market-search__suggestions span,
.ncmw-popular-pill span {
    color: var(--ncmw-text-muted);
}

.ncmw-popular-pills {
    border-color: var(--ncmw-border);
    background: transparent;
}

.ncmw-popular-pill {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-popular-pill:hover,
.ncmw-popular-pill:focus {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text-strong);
}

.ncmw-filter-row {
    border-color: var(--ncmw-border);
    background: transparent;
}

.ncmw-filter-row a {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-filter-row a:hover,
.ncmw-filter-row a:focus,
.ncmw-filter-row a.is-active {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-surface-3);
    color: var(--ncmw-text-strong);
}

.ncmw-filter-row a.is-active::before {
    color: var(--ncmw-accent);
    content: "✓ ";
}

.ncmw-summary-grid {
    gap: 1rem;
}

.ncmw-product-market-card,
.ncmw-summary-card,
.ncmw-product-detail,
.ncmw-observations,
.ncmw-empty {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
    box-shadow: var(--nc-shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.ncmw-product-market-card--compact {
    border-top-color: var(--ncmw-accent);
    background: var(--ncmw-surface-1);
}

.ncmw-clickable-card:hover,
.ncmw-clickable-card:focus {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-2);
    box-shadow: var(--nc-shadow-md, 0 20px 50px rgba(0, 0, 0, 0.28));
}

.ncmw-product-market-card:focus .ncmw-product-market-card__head h2,
.ncmw-product-market-card:hover .ncmw-product-market-card__head h2,
.ncmw-summary-card:focus h2,
.ncmw-summary-card:hover h2,
.ncmw-product-market-card--compact:focus h2,
.ncmw-product-market-card--compact:hover h2 {
    color: var(--nc-link-hover, #91caff);
}

.ncmw-card-top,
.ncmw-product-market-card__head,
.ncmw-compact-card-meta,
.ncmw-product-detail__head,
.ncmw-section-head {
    border-color: var(--ncmw-border);
}

.ncmw-component-pill,
.ncmw-region-pill,
.ncmw-market-sample-pill,
.ncmw-gpu-market-pill {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-3);
    color: var(--ncmw-text-secondary);
}

.ncmw-component-pill {
    color: var(--ncmw-text-strong);
}

.ncmw-compact-price-row,
.ncmw-product-kpis,
.ncmw-source-strip {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-inset);
}

.ncmw-compact-price-row strong,
.ncmw-product-kpis strong,
.ncmw-gpu-listing__price strong {
    color: var(--ncmw-text-strong);
}

.ncmw-compact-price-row span,
.ncmw-compact-card-meta {
    color: var(--ncmw-text-muted);
}

.ncmw-mini-chart {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-inset);
}

.ncmw-mini-chart small,
.ncmw-mini-chart__head {
    color: var(--ncmw-text-muted);
}

.ncmw-mini-chart__head strong {
    color: var(--ncmw-text-strong);
}

.ncmw-mini-chart--msrp.is-above .ncmw-msrp-bar__fill {
    background: var(--ncmw-up);
}

.ncmw-mini-chart--msrp.is-below .ncmw-msrp-bar__fill {
    background: var(--ncmw-down);
}

.ncmw-trend {
    border: 1px solid var(--ncmw-border-strong);
    background: var(--ncmw-surface-inset);
    color: var(--ncmw-text-secondary);
}

.ncmw-trend.is-up {
    border-color: color-mix(in srgb, var(--ncmw-up) 55%, var(--ncmw-border));
    background: color-mix(in srgb, var(--ncmw-up) 10%, var(--ncmw-surface-inset));
    color: #f7c76d;
}

.ncmw-trend.is-down {
    border-color: color-mix(in srgb, var(--ncmw-down) 55%, var(--ncmw-border));
    background: color-mix(in srgb, var(--ncmw-down) 10%, var(--ncmw-surface-inset));
    color: #83d9dc;
}

.ncmw-trend.is-near {
    border-color: color-mix(in srgb, var(--nc-success, #62c982) 55%, var(--ncmw-border));
    background: color-mix(in srgb, var(--nc-success, #62c982) 10%, var(--ncmw-surface-inset));
    color: #8fdca6;
}

.ncmw-trend.is-flat {
    border-color: color-mix(in srgb, var(--ncmw-flat) 55%, var(--ncmw-border));
    background: color-mix(in srgb, var(--ncmw-flat) 10%, var(--ncmw-surface-inset));
    color: #c9b8ff;
}

.ncmw-tax-pill {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text-secondary);
}

.ncmw-tax-pill--tax-excluded {
    border-color: #8a6934;
    color: #e8c47c;
}

.ncmw-tax-pill--vat-included,
.ncmw-tax-pill--tax-included {
    border-color: #3f7752;
    color: #91d2a6;
}

.ncmw-tax-pill--mixed {
    border-color: #685895;
    color: #c6b6f1;
}

.ncmw-tax-pill--unknown {
    color: var(--ncmw-text-muted);
}

.ncmw-product-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--ncmw-border);
}

.ncmw-product-kpis div {
    background: var(--ncmw-surface-inset);
}

.ncmw-gpu-listing {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text-secondary);
}

/* The observation age sits in the price column, which the light rules colour
   with the same muted ink as the main column. Both columns need the dark
   equivalent or the age line drops to ~3.7:1 on the card surface. */
.ncmw-gpu-listing__main small,
.ncmw-gpu-listing__main span,
.ncmw-gpu-listing__price span {
    color: var(--ncmw-text-muted);
}

.ncmw-source-strip,
.ncmw-source-strip b,
.ncmw-subtle-link {
    color: var(--ncmw-text-secondary);
}

.ncmw-subtle-link:hover,
.ncmw-subtle-link:focus {
    color: var(--nc-link-hover, #91caff);
}

.ncmw-table-wrap {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    scrollbar-color: var(--ncmw-border-strong) var(--ncmw-surface-inset);
}

.ncmw-table {
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-3);
    color: var(--ncmw-text-strong);
}

.ncmw-table td {
    border-color: var(--ncmw-border);
    background: transparent;
    color: var(--ncmw-text-secondary);
}

.ncmw-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.018);
}

.ncmw-table tbody tr:hover {
    background: rgba(35, 136, 255, 0.045);
}

.ncmw-market-legend {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-inset);
}

.ncmw-market-legend strong,
.ncmw-market-legend b {
    color: var(--ncmw-text-secondary);
}

.ncmw-market-legend__fineprint,
.ncmw-market-legend p,
.ncmw-market-legend li {
    color: var(--ncmw-text-muted);
}

/* The embedded panel is a card on the entry's dark background, so it sits one
   step above the page rather than on --ncmw-bg. */
.ncmw-gpu-panel {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-gpu-panel__shell,
.ncmw-gpu-market-details,
.ncmw-gpu-market-detail-body {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-gpu-panel__intro {
    color: var(--ncmw-text-muted);
}

.ncmw-gpu-market-summary {
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text);
}

/* Disclosure chevron. The light rule paints a pale mint chip, which is the
   brightest thing left in the panel once the surfaces go dark. */
.ncmw-gpu-market-summary::before {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-3);
    color: var(--ncmw-accent);
}

/* Hover and keyboard focus fill the chip with the brand green. Dark ink on that
   fill reads at ~9.8:1; the light rule's white ink only reached ~2.5:1. */
.ncmw-gpu-market-summary:hover::before,
.ncmw-gpu-market-summary:focus-visible::before {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-accent);
    color: #071000;
}

.ncmw-gpu-market-summary__title,
.ncmw-gpu-listing__main strong,
.ncmw-gpu-listing__main a {
    color: var(--ncmw-text-strong);
}

.ncmw-gpu-market-link {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-accent);
    color: #071000;
}

.ncmw-home-spotlight {
    border-block: 1px solid var(--ncmw-border);
    background: var(--ncmw-surface-inset);
    color: var(--ncmw-text);
}

.ncmw-home-spotlight h2 {
    color: var(--ncmw-text-strong);
}

.ncmw-home-spotlight p {
    color: var(--ncmw-text-secondary);
}

.ncmw-home-spotlight__cards a {
    border-color: var(--ncmw-border);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
}

.ncmw-home-spotlight__cards a:hover {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-surface-2);
}

.ncmw-home-spotlight__cards strong,
.ncmw-home-spotlight__cards span {
    color: var(--ncmw-text-strong);
}

.ncmw-home-spotlight__cards small {
    color: var(--ncmw-text-muted);
}

/* Complete the dark-theme pass for nested labels and legacy light surfaces. */
.ncmw-popular-pills__head strong {
    color: var(--ncmw-text-strong);
}

.ncmw-popular-pill b {
    color: var(--nc-link, #56a8ff);
}

.ncmw-product-market-card--compact h2 {
    color: var(--ncmw-text-strong);
}

.ncmw-source-strip b,
.ncmw-subtle-link {
    border-color: var(--ncmw-border-strong);
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text-secondary);
}

.ncmw-subtle-link:hover,
.ncmw-subtle-link:focus {
    border-color: var(--ncmw-accent);
    background: var(--ncmw-surface-3);
    color: var(--nc-link-hover, #91caff);
}

.ncmw-page a.ncmw-gpu-market-link {
    color: #071000;
}

.ncmw-link-button,
.ncmw-link-button:hover,
.ncmw-link-button:focus {
    border-color: var(--ncmw-accent, var(--nc-accent, #2388ff));
    background: var(--ncmw-accent, var(--nc-accent, #2388ff));
    color: #071000;
}

@media (max-width: 900px) {
    .ncmw-product-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Table-first public browser (0.3.1). These rules are scoped to the redesigned
   route so embedded GPU Wiki panels keep their established compact treatment. */
.ncmw-page--table-first .ncmw-hero::after {
    opacity: 0.42;
}

.ncmw-page--table-first .ncmw-hero__inner {
    display: block;
    padding-block: 0.7rem 0.8rem;
}

.ncmw-page--table-first .ncmw-hero h1 {
    margin-bottom: 0.2rem;
    font-size: clamp(1.5rem, 2vw, 1.9rem);
}

.ncmw-page--table-first .ncmw-hero p:not(.nc-kicker) {
    font-size: 0.92rem;
}

.ncmw-page--table-first .ncmw-market {
    max-width: 1280px;
    padding-block: 0.7rem 2.5rem;
}

.ncmw-page--table-first .ncmw-hero .nc-kicker {
    display: none;
}

.ncmw-component-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--ncmw-border);
}

.ncmw-component-tabs a {
    min-height: 42px;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 0.82rem;
    color: var(--ncmw-text-secondary);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.ncmw-component-tabs a:hover,
.ncmw-component-tabs a:focus-visible,
.ncmw-component-tabs a[aria-current="page"] {
    border-bottom-color: var(--ncmw-accent);
    color: var(--ncmw-text-strong);
}

.ncmw-browser-controls {
    display: grid;
    grid-template-columns: minmax(280px, 1.7fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr) auto;
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.ncmw-browser-controls--product {
    grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) auto;
    margin-top: 0.75rem;
}

/*
 * The product page's Region/Market form has nothing but those two selects,
 * so once market-watch.js submits on change there is nothing left for its
 * own button to do (2026-09-11: the owner asked for this to "immediately
 * take effect" rather than needing a click). Gated on .ncmw-has-js so a
 * no-JS visit still gets a working manual button instead of a dead end; the
 * listing page's Search button is untouched, since it still owns the free-
 * text search field.
 *
 * display: none removes the button from grid layout entirely, so the two
 * remaining fields settle into place on their own -- deliberately NOT
 * touching grid-template-columns here, because the 780px breakpoint below
 * redefines it for .ncmw-browser-controls--product too, and a same-file rule
 * with higher specificity (two classes against that breakpoint's one) would
 * silently win at every width, including the one it was never meant to
 * override.
 *
 * !important is required, not decorative: this is the same theme-wide
 * button reset documented above the sort-header rule
 * ("body.nc-site button:not(...)", design-system.css) outranking a
 * three-class selector on its six classes. Without it the button stayed
 * visible after this rule shipped, confirmed live.
 */
.ncmw-has-js .ncmw-browser-controls--product .ncmw-controls-submit {
    display: none !important;
}

.ncmw-control {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    color: var(--ncmw-text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.ncmw-control > span,
.ncmw-product-search > label {
    letter-spacing: 0.02em;
}

.ncmw-control input,
.ncmw-control select,
.ncmw-product-search input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ncmw-border-strong);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-inset);
    color: var(--ncmw-text);
    padding: 0.62rem 0.72rem;
    font: inherit;
    font-size: 0.92rem;
}

.ncmw-control input::placeholder,
.ncmw-product-search input::placeholder {
    color: var(--ncmw-text-muted);
}

.ncmw-control input:focus-visible,
.ncmw-control select:focus-visible,
.ncmw-product-search input:focus-visible {
    border-color: var(--nc-focus, #c4f879);
    outline: 3px solid color-mix(in srgb, var(--nc-focus, #c4f879) 28%, transparent);
    outline-offset: 1px;
}

.ncmw-control--mobile-sort {
    display: none;
}

.ncmw-controls-submit,
.ncmw-product-search button {
    min-height: 44px;
    border: 1px solid var(--ncmw-accent);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-accent);
    color: #071000;
    padding: 0.62rem 1rem;
    font-weight: 800;
    cursor: pointer;
}

.ncmw-controls-submit:hover,
.ncmw-controls-submit:focus-visible,
.ncmw-product-search button:hover,
.ncmw-product-search button:focus-visible {
    border-color: var(--nc-link-hover, #91caff);
    background: var(--nc-link-hover, #91caff);
    outline: 3px solid color-mix(in srgb, var(--nc-focus, #c4f879) 28%, transparent);
    outline-offset: 2px;
}

.ncmw-controls-reset {
    grid-column: 1 / -1;
    justify-self: start;
    color: var(--ncmw-text-secondary);
    font-size: 0.82rem;
}

/* Kept in the grid (not display: none) so its row still reserves height when
   there is nothing to clear; see the render comment in public-market-watch.php. */
.ncmw-controls-reset--hidden {
    visibility: hidden;
    pointer-events: none;
}

.ncmw-scope-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 1rem;
    margin-bottom: 0.65rem;
    border-left: 3px solid var(--ncmw-accent);
    background: var(--ncmw-surface-1);
    padding: 0.62rem 0.8rem;
    color: var(--ncmw-text-secondary);
    font-size: 0.82rem;
}

.ncmw-scope-context strong {
    color: var(--ncmw-text-strong);
    font-size: 0.88rem;
}

.ncmw-scope-context span {
    grid-column: 1;
}

.ncmw-scope-context a {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--nc-link, #56a8ff);
    font-weight: 750;
}

@media (min-width: 1021px) {
    .ncmw-scope-context {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .ncmw-scope-context span {
        grid-column: 2;
    }

    .ncmw-scope-context a {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (min-width: 1200px) {
    .ncmw-page--table-first .ncmw-market {
        padding-top: 0.2rem;
    }

    .ncmw-page--table-first .ncmw-hero__inner {
        padding-block: 0.3rem;
    }

    .ncmw-page--table-first .ncmw-hero__inner > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 1rem;
        align-items: baseline;
    }

    .ncmw-page--table-first .ncmw-hero h1,
    .ncmw-page--table-first .ncmw-hero p:not(.nc-kicker) {
        margin: 0;
    }

    .ncmw-overview {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1.15rem;
    }

    .ncmw-overview > * {
        grid-column: 1 / -1;
    }

    .ncmw-overview > .ncmw-component-tabs {
        grid-column: 1;
        align-self: end;
        margin-bottom: 0.3rem;
    }

    .ncmw-overview > .ncmw-browser-controls {
        grid-column: 2;
        margin-bottom: 0.3rem;
    }

    .ncmw-overview .ncmw-component-tabs a {
        min-height: 40px;
        padding-block: 0.48rem;
    }

    .ncmw-overview .ncmw-control input,
    .ncmw-overview .ncmw-control select,
    .ncmw-overview .ncmw-controls-submit {
        min-height: 42px;
        padding-block: 0.5rem;
    }

    .ncmw-overview > .ncmw-scope-context {
        margin-bottom: 0.35rem;
        padding-block: 0.35rem;
    }

    .ncmw-overview > .ncmw-results-head {
        margin: 0.25rem 0 0.3rem;
    }
}

.ncmw-results-head,
.ncmw-region-group__head,
.ncmw-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.ncmw-results-head {
    margin: 0.7rem 0 0.45rem;
    color: var(--ncmw-text-muted);
    font-size: 0.82rem;
}

.ncmw-results-head p {
    margin: 0;
}

.ncmw-results-head p:first-child {
    color: var(--ncmw-text-secondary);
    font-weight: 700;
}

.ncmw-price-table-shell {
    overflow: hidden;
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-lg, 12px);
    background: var(--ncmw-surface-1);
}

.ncmw-price-table,
.ncmw-product-regions-table,
.ncmw-evidence-table,
.ncmw-history-data table,
.ncmw-other-markets table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    color: var(--ncmw-text-secondary);
    font-size: 0.9rem;
}

.ncmw-price-table th,
.ncmw-price-table td,
.ncmw-product-regions-table th,
.ncmw-product-regions-table td,
.ncmw-evidence-table th,
.ncmw-evidence-table td,
.ncmw-history-data th,
.ncmw-history-data td,
.ncmw-other-markets th,
.ncmw-other-markets td {
    border: 0;
    border-bottom: 1px solid var(--ncmw-border);
    background: transparent;
    padding: 0.75rem 0.78rem;
    text-align: left;
    vertical-align: middle;
}

/*
 * Number columns line up on their right edge -- header caret and the value
 * below it share one edge. The data-cell selectors need the .ncmw-price-table
 * prefix or the shared `.ncmw-price-table td { text-align: left }` rule
 * (equal class count, later in the file) wins and the values drift left of
 * their headers.
 */
.ncmw-price-table .ncmw-col-price,
.ncmw-price-table .ncmw-col-change,
.ncmw-price-table .ncmw-col-observations,
.ncmw-price-table .ncmw-col-popularity,
.ncmw-price-table .ncmw-price-row__price,
.ncmw-price-table .ncmw-price-row__change,
.ncmw-price-table .ncmw-price-row__observations,
.ncmw-price-table .ncmw-price-row__popularity {
    text-align: right;
}

.ncmw-price-table .ncmw-col-freshness,
.ncmw-price-table .ncmw-price-row__freshness {
    text-align: left;
}

.ncmw-price-table thead,
.ncmw-product-regions-table thead,
.ncmw-evidence-table thead,
.ncmw-history-data thead,
.ncmw-other-markets thead {
    background: var(--ncmw-surface-3);
}

.ncmw-price-table thead th,
.ncmw-product-regions-table thead th,
.ncmw-evidence-table thead th,
.ncmw-history-data thead th,
.ncmw-other-markets thead th {
    color: var(--ncmw-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.ncmw-sort-form {
    margin: 0;
}

.ncmw-sort-form button {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    min-height: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.ncmw-sort-form button:hover,
.ncmw-sort-form button:focus-visible {
    color: var(--nc-link-hover, #91caff);
    outline: 2px solid var(--nc-focus, #c4f879);
    outline-offset: 3px;
}

/*
 * Sortable column headers: plain text plus a sort caret, sitting on the same
 * edge as the column's values. The old boxed "pill" buttons had their own
 * border and padding, so every header read a few pixels inside its cell and
 * looked shifted against the numbers below it -- worst on the right-aligned
 * columns, where the block <form> also kept the button hard left while the
 * data was hard right.
 */
.ncmw-page--table-first .ncmw-price-table .ncmw-sort-form {
    display: flex;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-col-price .ncmw-sort-form,
.ncmw-page--table-first .ncmw-price-table .ncmw-col-change .ncmw-sort-form,
.ncmw-page--table-first .ncmw-price-table .ncmw-col-observations .ncmw-sort-form,
.ncmw-page--table-first .ncmw-price-table .ncmw-col-popularity .ncmw-sort-form {
    justify-content: flex-end;
}

/*
 * Every property here needs !important. The site-wide brand-button reset
 * (design-system.css, "body.nc-site button:not(...)") outranks this selector
 * on specificity (six classes against four), and its own !important-free
 * padding/min-height/justify-content were winning silently: a real button
 * pads its label 1rem from each edge and centers it, so the header text sat
 * up to 16px inside its cell instead of flush against the edge the data
 * below it uses. That is what the comment above describes as still broken,
 * even though min-height and padding already looked "reset" to 0 right here.
 */
.ncmw-page--table-first .ncmw-price-table .ncmw-sort-form button[type="submit"] {
    display: inline-flex !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--ncmw-text-secondary) !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-underline-offset: 3px;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-sort-form button[type="submit"]:hover,
.ncmw-page--table-first .ncmw-price-table .ncmw-sort-form button[type="submit"]:focus-visible {
    color: var(--nc-link-hover, #91caff) !important;
    text-decoration: underline;
}

.ncmw-page--table-first .ncmw-price-table th[aria-sort="ascending"] .ncmw-sort-form button[type="submit"],
.ncmw-page--table-first .ncmw-price-table th[aria-sort="descending"] .ncmw-sort-form button[type="submit"] {
    color: var(--nc-link-hover, #91caff) !important;
    font-weight: 900;
}

/*
 * Expand control: a narrow, header-less trailing column with a chevron that
 * toggles the row's detail panel (the disclosure <button> and its JS are
 * unchanged -- only its look). Replaces the "Details" text column and its
 * pill button; points down when collapsed, up when the panel is open.
 */
.ncmw-price-table .ncmw-col-expand,
.ncmw-price-table .ncmw-price-row__actions {
    width: 1%;
    padding-left: 0;
    padding-right: 0.6rem;
    text-align: center;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-row-disclosure[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0 !important;
    border-radius: 4px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ncmw-text-secondary) !important;
    cursor: pointer;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-row-disclosure[type="button"] > span {
    display: none;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-row-disclosure[type="button"]::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform 0.15s ease, color 0.12s ease;
}

.ncmw-page--table-first .ncmw-price-table .ncmw-row-disclosure[type="button"]:hover,
.ncmw-page--table-first .ncmw-price-table .ncmw-row-disclosure[type="button"]:focus-visible,
.ncmw-price-table__item:has(.ncmw-price-detail-row:not([hidden])) .ncmw-row-disclosure[type="button"] {
    color: var(--ncmw-accent) !important;
}

.ncmw-price-table__item:has(.ncmw-price-detail-row:not([hidden])) .ncmw-row-disclosure[type="button"]::after {
    transform: rotate(-135deg);
}

/* No-JS fallback: the "Full history" link stays a plain, legible link. */
.ncmw-page--table-first .ncmw-price-table .ncmw-row-full-link {
    border: 0 !important;
    background: transparent !important;
    min-width: 0;
    padding: 0 !important;
    color: var(--ncmw-text-secondary) !important;
    text-decoration: underline;
}

.ncmw-price-row {
    min-height: 58px;
}

.ncmw-price-row:hover {
    background: rgba(35, 136, 255, 0.035);
}

.ncmw-price-row__component {
    width: 34%;
    color: var(--ncmw-text-strong);
    font-size: 0.94rem;
}

.ncmw-price-row__component a {
    color: var(--ncmw-text-strong);
    font-weight: 780;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ncmw-price-row__component a:hover,
.ncmw-price-row__component a:focus-visible {
    color: var(--nc-link-hover, #91caff);
}

.ncmw-price-row__component > span {
    display: block;
    margin-top: 0.18rem;
    color: var(--ncmw-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.ncmw-price-row__price strong {
    color: var(--ncmw-text-strong);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.ncmw-price-row__change,
.ncmw-price-row__observations,
.ncmw-price-row__popularity,
.ncmw-price-row__freshness {
    color: var(--ncmw-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Same semantic palette as everywhere else this site shows a price trend
 * (the homepage rail's .nc-rail-trend, and this plugin's own .ncmw-trend
 * pills on product pages): amber for a price increase, teal for a decrease,
 * purple for flat. --ncmw-up/-down/-flat already fall back to the same
 * --nc-market-* theme variables the homepage rail reads directly, so this
 * is one palette, not a second one. This table was the one place still
 * rendering all three states in the same plain text color.
 */
.ncmw-price-row__change.is-up {
    color: var(--ncmw-up);
}

.ncmw-price-row__change.is-down {
    color: var(--ncmw-down);
}

.ncmw-price-row__change.is-flat {
    color: var(--ncmw-flat);
}

.ncmw-unavailable,
.ncmw-price-row__change.is-insufficient-history,
.ncmw-price-row__change.is-unavailable {
    color: var(--ncmw-text-muted);
}

.ncmw-row-disclosure,
.ncmw-row-full-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ncmw-border-strong);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-2);
    color: var(--ncmw-text);
    padding: 0.4rem 0.62rem;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.ncmw-row-disclosure:hover,
.ncmw-row-disclosure:focus-visible,
.ncmw-row-full-link:hover,
.ncmw-row-full-link:focus-visible {
    border-color: var(--ncmw-accent);
    color: var(--nc-link-hover, #91caff);
    outline: 2px solid var(--nc-focus, #c4f879);
    outline-offset: 2px;
}

.ncmw-row-disclosure > span[aria-hidden="true"]::before {
    content: "+";
    margin-right: 0.32rem;
    color: var(--ncmw-text-muted);
}

.ncmw-row-disclosure:hover > span[aria-hidden="true"]::before,
.ncmw-row-disclosure:focus-visible > span[aria-hidden="true"]::before,
.ncmw-row-disclosure[aria-expanded="true"] > span[aria-hidden="true"]::before {
    color: var(--ncmw-accent);
}

.ncmw-row-disclosure[aria-expanded="true"] > span[aria-hidden="true"]::before {
    content: "−";
}

.ncmw-has-js .ncmw-row-full-link {
    display: none;
}

.ncmw-price-detail-row[hidden] {
    display: none;
}

.ncmw-price-detail-row > td {
    background: var(--ncmw-surface-inset);
    padding: 0;
}

.ncmw-row-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr) auto;
    gap: 1rem;
    align-items: start;
    border-left: 3px solid var(--ncmw-accent);
    padding: 0.9rem 1rem;
}

.ncmw-row-detail > p {
    margin: 0;
    color: var(--ncmw-text-secondary);
}

.ncmw-row-detail__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
    margin: 0;
}

.ncmw-row-detail__facts div {
    min-width: 0;
}

.ncmw-row-detail__facts dt,
.ncmw-row-detail__markets small {
    color: var(--ncmw-text-muted);
    font-size: 0.74rem;
}

.ncmw-row-detail__facts dd {
    margin: 0.12rem 0 0;
    color: var(--ncmw-text);
    font-size: 0.84rem;
}

.ncmw-row-detail__markets > strong {
    color: var(--ncmw-text-secondary);
    font-size: 0.78rem;
}

.ncmw-row-detail__markets ul {
    display: grid;
    gap: 0.28rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.ncmw-row-detail__markets li {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 0.1rem 0.6rem;
    font-size: 0.8rem;
}

.ncmw-row-detail__markets li small {
    grid-column: 1 / -1;
}

.ncmw-row-detail__link,
.ncmw-row-detail > a {
    align-self: center;
    color: var(--nc-link, #56a8ff);
    font-size: 0.82rem;
    font-weight: 750;
}

.ncmw-region-group {
    margin-top: 1.25rem;
}

.ncmw-region-group__head {
    margin-bottom: 0.4rem;
}

.ncmw-region-group__head h2,
.ncmw-section-head h2 {
    margin: 0;
    color: var(--ncmw-text-strong);
    font-size: 1.25rem;
}

.ncmw-region-group__head p {
    margin: 0;
    color: var(--ncmw-text-muted);
    font-size: 0.8rem;
}

.ncmw-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin: 0.85rem 0;
}

.ncmw-pagination a,
.ncmw-pagination [aria-current="page"] {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
    padding: 0.42rem 0.65rem;
    text-decoration: none;
}

.ncmw-pagination a:hover,
.ncmw-pagination a:focus-visible,
.ncmw-pagination [aria-current="page"] {
    border-color: var(--ncmw-accent);
    color: var(--ncmw-text-strong);
}

.ncmw-evidence-disclosure,
.ncmw-methodology {
    margin-top: 0.75rem;
}

.ncmw-evidence-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-md, 8px);
    background: var(--ncmw-surface-1);
    scrollbar-color: var(--ncmw-border-strong) var(--ncmw-surface-inset);
}

.ncmw-evidence-table-wrap:focus-visible {
    outline: 3px solid var(--nc-focus, #c4f879);
    outline-offset: 3px;
}

.ncmw-evidence-table,
.ncmw-history-data table {
    min-width: 720px;
}

.ncmw-evidence-table tbody tr:hover {
    background: rgba(35, 136, 255, 0.035);
}

.ncmw-back-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    color: var(--nc-link, #56a8ff);
    font-weight: 750;
}

.ncmw-product-wiki-link {
    margin: 0.15rem 0 0.8rem;
}

.ncmw-product-wiki-link a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ncmw-border-strong);
    border-radius: 999px;
    background: var(--ncmw-surface-1);
    color: var(--nc-link, #56a8ff);
    font-weight: 750;
    text-decoration: none;
}

.ncmw-product-wiki-link a:hover,
.ncmw-product-wiki-link a:focus-visible {
    border-color: var(--nc-link, #56a8ff);
    background: var(--ncmw-surface-2);
    color: var(--nc-link-hover, #72b7ff);
}

.ncmw-primary-snapshot,
.ncmw-price-history,
.ncmw-product-regions,
.ncmw-other-markets,
.ncmw-product-evidence {
    margin-top: 1rem;
}

.ncmw-primary-snapshot {
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-lg, 12px);
    background: var(--ncmw-surface-1);
    padding: clamp(0.9rem, 2vw, 1.25rem);
}

.ncmw-primary-snapshot__heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.8rem;
}

.ncmw-primary-snapshot__heading h2 {
    margin: 0;
    color: var(--ncmw-text-strong);
    font-size: 1.3rem;
}

.ncmw-primary-snapshot__heading > span {
    color: var(--ncmw-text-muted);
    font-size: 0.8rem;
}

.ncmw-primary-snapshot__values {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(150px, 0.7fr));
    gap: 1px;
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-md, 8px);
    overflow: hidden;
    background: var(--ncmw-border);
}

.ncmw-primary-snapshot__values > div {
    display: grid;
    gap: 0.22rem;
    background: var(--ncmw-surface-inset);
    padding: 0.8rem;
}

.ncmw-primary-snapshot__values span {
    color: var(--ncmw-text-muted);
    font-size: 0.78rem;
}

.ncmw-primary-snapshot__values strong {
    color: var(--ncmw-text-strong);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.ncmw-primary-snapshot__price strong {
    font-size: clamp(1.55rem, 3vw, 2.05rem);
}

.ncmw-primary-snapshot__basis,
.ncmw-product-regions > p,
.ncmw-product-evidence > p {
    margin: 0.7rem 0 0;
    color: var(--ncmw-text-secondary);
    font-size: 0.86rem;
}

.ncmw-section-head {
    margin-bottom: 0.55rem;
}

.ncmw-section-head .nc-kicker,
.ncmw-primary-snapshot .nc-kicker {
    margin-bottom: 0.2rem;
}

.ncmw-section-head--history {
    align-items: center;
}

.ncmw-range-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ncmw-range-nav a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid var(--ncmw-border);
    border-radius: 999px;
    background: var(--ncmw-surface-1);
    color: var(--ncmw-text-secondary);
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
}

.ncmw-range-nav a:hover,
.ncmw-range-nav a:focus-visible,
.ncmw-range-nav a[aria-current="page"] {
    border-color: var(--ncmw-accent);
    color: var(--ncmw-text-strong);
}

.ncmw-history-chart {
    border: 1px solid var(--ncmw-border);
    border-radius: var(--nc-radius-lg, 12px);
    background: var(--ncmw-surface-1);
    padding: 0.85rem;
}

.ncmw-history-chart > p:first-child,
.ncmw-history-chart__note {
    margin: 0 0 0.45rem;
    color: var(--ncmw-text-secondary);
    font-size: 0.84rem;
}

.ncmw-history-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    color: var(--ncmw-text-muted);
}

.ncmw-history-chart svg text {
    fill: currentColor;
    font-size: 12px;
}

.ncmw-chart-axis {
    stroke: var(--ncmw-border-strong);
    stroke-width: 1;
}

.ncmw-chart-line {
    fill: none;
    stroke: var(--ncmw-accent);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.ncmw-chart-point {
    fill: var(--ncmw-surface-1);
    stroke: var(--ncmw-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.ncmw-history-chart__note {
    margin-top: 0.5rem;
    color: var(--ncmw-text-muted);
}

.ncmw-history-data {
    margin-top: 0.6rem;
}

.ncmw-history-data > summary {
    min-height: 36px;
    color: var(--nc-link, #56a8ff);
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.ncmw-product-regions-table th small {
    display: block;
    color: var(--ncmw-text-muted);
    font-weight: 500;
}

.ncmw-product-regions-table td:nth-child(2),
.ncmw-product-regions-table td:nth-child(3),
.ncmw-other-markets td:nth-child(2),
.ncmw-other-markets td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ncmw-product-search {
    display: grid;
    gap: 0.3rem;
    max-width: 640px;
}

.ncmw-product-search > label {
    color: var(--ncmw-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.ncmw-product-search > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

@media (max-width: 1020px) {
    .ncmw-browser-controls {
        grid-template-columns: minmax(250px, 1fr) repeat(2, minmax(150px, 0.65fr)) auto;
    }

    .ncmw-price-table th,
    .ncmw-price-table td {
        padding-inline: 0.55rem;
        font-size: 0.84rem;
    }

    .ncmw-row-detail {
        grid-template-columns: 1fr 1fr;
    }

    .ncmw-row-detail__link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 780px) {
    .ncmw-page--table-first .ncmw-hero__inner {
        padding-block: 1rem;
    }

    .ncmw-browser-controls,
    .ncmw-browser-controls--product {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ncmw-control--search {
        grid-column: 1 / -1;
    }

    .ncmw-control--mobile-sort {
        display: grid;
    }

    .ncmw-controls-submit {
        align-self: end;
    }

    .ncmw-scope-context {
        grid-template-columns: 1fr;
    }

    .ncmw-scope-context span,
    .ncmw-scope-context a {
        grid-column: 1;
        grid-row: auto;
    }

    .ncmw-results-head p:last-child {
        display: none;
    }

    .ncmw-price-table-shell {
        overflow: visible;
        border-radius: var(--nc-radius-md, 8px);
    }

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

    .ncmw-price-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ncmw-price-table__item:not(:last-child) {
        border-bottom: 1px solid var(--ncmw-border-strong);
    }

    /*
     * Compact two-line card. The whole card is the tap target for the detail
     * panel -- there is no visible expand button; the existing disclosure
     * <button> is stretched invisibly across the card (opacity: 0, so it stays
     * focusable and its aria state still drives the toggle via the untouched
     * JS). Interaction is shown by the card lighting up on hover / touch /
     * keyboard focus, and it stays lit while its panel is open.
     *
     * Every selector is prefixed with .ncmw-price-table because the mobile
     * table reset (.ncmw-price-table tr/th/td { display: block }) outweighs a
     * bare .ncmw-price-row and would otherwise cancel the layout.
     */
    .ncmw-price-table .ncmw-price-row {
        position: relative;
        display: grid;
        grid-template-columns: max-content max-content 1fr auto;
        gap: 0.12rem 0.5rem;
        min-height: 0;
        padding: 0.62rem 0.8rem;
        cursor: pointer;
        transition: background-color 0.12s ease, box-shadow 0.12s ease;
    }

    .ncmw-price-table .ncmw-price-row:hover,
    .ncmw-price-table .ncmw-price-row:active,
    .ncmw-price-table .ncmw-price-row:focus-within,
    .ncmw-price-table__item:has(.ncmw-price-detail-row:not([hidden])) .ncmw-price-row {
        background: rgba(35, 136, 255, 0.06);
        box-shadow: inset 3px 0 0 var(--ncmw-accent);
    }

    .ncmw-price-table .ncmw-price-row > th,
    .ncmw-price-table .ncmw-price-row > td {
        width: auto;
        min-width: 0;
        border: 0;
        padding: 0;
    }

    /* Line 1: name and (when unfiltered) the type label, inline. */
    .ncmw-price-table .ncmw-price-row__component {
        grid-column: 1 / 4;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4rem;
        font-size: 0.92rem;
    }

    .ncmw-price-table .ncmw-price-row__component a {
        position: relative;
        z-index: 2;
        font-weight: 750;
    }

    .ncmw-price-table .ncmw-price-row__component > span {
        font-size: 0.72rem;
        font-weight: 650;
        color: var(--ncmw-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .ncmw-price-table .ncmw-price-row__component > span[aria-hidden] {
        display: none;
    }

    .ncmw-price-table .ncmw-price-row__price {
        position: relative;
        grid-column: 4;
        grid-row: 1;
        align-self: baseline;
        text-align: right;
        white-space: nowrap;
    }

    /* Resting cue that the card expands: a small, quiet down-chevron just
       under the price. Drawn from two borders (consistent across platforms,
       unlike a glyph); flips to point up while the card's panel is open. */
    .ncmw-price-table .ncmw-price-row__price::after {
        content: "";
        position: absolute;
        right: 3px;
        top: calc(100% + 4px);
        width: 6px;
        height: 6px;
        border-right: 1.5px solid rgba(35, 136, 255, 0.45);
        border-bottom: 1.5px solid rgba(35, 136, 255, 0.45);
        transform: rotate(45deg);
        transform-origin: 60% 60%;
        transition: transform 0.15s ease, border-color 0.12s ease;
        pointer-events: none;
    }

    .ncmw-price-table .ncmw-price-row:hover .ncmw-price-row__price::after,
    .ncmw-price-table .ncmw-price-row:active .ncmw-price-row__price::after,
    .ncmw-price-table .ncmw-price-row:focus-within .ncmw-price-row__price::after {
        border-color: var(--ncmw-accent);
    }

    .ncmw-price-table__item:has(.ncmw-price-detail-row:not([hidden])) .ncmw-price-row__price::after {
        transform: rotate(-135deg);
        border-color: var(--ncmw-accent);
    }

    .ncmw-price-table .ncmw-price-row__price strong {
        font-size: 0.95rem;
    }

    /* Line 2: change, observations, age -- each in its own grid column so
       they sit side by side with the column-gap between them. Popularity is
       real but secondary, and the card is already tight with three values on
       this row, so it stays desktop-table-only rather than forcing a fourth
       grid column into a layout tuned for three. */
    .ncmw-price-table .ncmw-price-row__popularity {
        display: none;
    }

    .ncmw-price-table .ncmw-price-row__change,
    .ncmw-price-table .ncmw-price-row__observations,
    .ncmw-price-table .ncmw-price-row__freshness {
        grid-row: 2;
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .ncmw-price-table .ncmw-price-row__observations,
    .ncmw-price-table .ncmw-price-row__freshness {
        color: var(--ncmw-text-muted);
    }

    .ncmw-price-table .ncmw-price-row__change {
        grid-column: 1;
        text-align: left;
    }

    .ncmw-price-table .ncmw-price-row__observations {
        grid-column: 2;
        text-align: left;
    }

    .ncmw-price-table .ncmw-price-row__observations::after {
        content: " obs";
        color: var(--ncmw-text-muted);
    }

    .ncmw-price-table .ncmw-price-row__freshness {
        grid-column: 3 / 5;
        white-space: nowrap;
    }

    /* The disclosure button: an invisible full-card overlay. opacity: 0 (not
       display: none / visibility: hidden) keeps it in the tab order and
       operable by keyboard; the visible feedback is the card glow above. */
    .ncmw-price-table .ncmw-price-row__actions {
        position: static;
        display: block;
        grid-column: 1 / 5;
        grid-row: 1 / 3;
    }

    .ncmw-price-table .ncmw-row-disclosure {
        position: absolute;
        inset: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0;
        cursor: pointer;
    }

    .ncmw-price-table .ncmw-row-disclosure > span {
        display: none;
    }

    .ncmw-row-full-link {
        min-height: 38px;
    }

    .ncmw-price-detail-row > td {
        padding: 0;
    }

    .ncmw-row-detail {
        grid-template-columns: 1fr;
        padding: 0.8rem;
    }

    .ncmw-row-detail__link {
        grid-column: auto;
    }

    .ncmw-primary-snapshot__values {
        grid-template-columns: 1fr 1fr;
    }

    .ncmw-primary-snapshot__price {
        grid-column: 1 / -1;
    }

    .ncmw-section-head--history {
        align-items: end;
    }

    .ncmw-price-history,
    .ncmw-product-regions,
    .ncmw-other-markets,
    .ncmw-product-evidence {
        margin-top: 1.35rem;
    }

    .ncmw-product-regions .ncmw-price-table-shell,
    .ncmw-other-markets .ncmw-price-table-shell {
        overflow-x: auto;
    }

    .ncmw-product-regions-table,
    .ncmw-other-markets table {
        min-width: 680px;
    }
}

@media (max-width: 520px) {
    .ncmw-component-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .ncmw-browser-controls,
    .ncmw-browser-controls--product {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ncmw-control--search,
    .ncmw-controls-reset {
        grid-column: 1 / -1;
    }

    .ncmw-results-head,
    .ncmw-region-group__head,
    .ncmw-section-head {
        align-items: start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .ncmw-price-row__component a {
        overflow-wrap: anywhere;
    }

    .ncmw-row-detail__facts {
        grid-template-columns: 1fr;
    }

    .ncmw-primary-snapshot__values {
        grid-template-columns: 1fr;
    }

    .ncmw-primary-snapshot__price {
        grid-column: auto;
    }

    .ncmw-primary-snapshot__heading {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ncmw-range-nav a {
        min-height: 36px;
    }

    .ncmw-product-search > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ncmw-product-kpis {
        grid-template-columns: 1fr;
    }

    .ncmw-filter-row,
    .ncmw-filter-row--regions {
        display: flex;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.45rem;
        scrollbar-width: thin;
    }

    .ncmw-filter-row a,
    .ncmw-filter-row--regions a {
        flex: 0 0 auto;
    }
}