/**
 * Shared data-table header chrome (light mode) — matches /brands .shops-table.brands-table thead.
 * Loaded after page CSS so these rules win the cascade. Dark mode stays in page/dark-mode CSS.
 */
:root {
    --wh-table-head-bg: #f8fafc;
    --wh-table-head-color: #475569;
    --wh-table-head-border: #e2e8f0;
    --wh-table-head-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    --wh-table-head-hover-bg: #f1f5f9;
}

/* Explore / Brands / Landers / Advertisers (.shops-table family) */
html:not([data-theme="dark"]) .shops-table thead,
html:not([data-theme="dark"]) #shopsTable thead,
html:not([data-theme="dark"]) #std-similar-shops-table thead {
    background-color: var(--wh-table-head-bg) !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    box-shadow: var(--wh-table-head-shadow) !important;
}

html:not([data-theme="dark"]) .shops-table thead th,
html:not([data-theme="dark"]) .new-page-wrapper .shops-table thead th,
html:not([data-theme="dark"]) .landers-page-wrapper .shops-table thead th,
html:not([data-theme="dark"]) .brands-page-wrapper .shops-table thead th,
html:not([data-theme="dark"]) .explore-shops-page-wrapper .shops-table thead th,
html:not([data-theme="dark"]) #shopsTable thead th,
html:not([data-theme="dark"]) .new-page-wrapper #shopsTable thead th,
html:not([data-theme="dark"]) .explore-shops-results-card.is-layout-table #shopsTable thead th,
html:not([data-theme="dark"]) #std-similar-shops-table thead th {
    background-color: var(--wh-table-head-bg) !important;
    color: var(--wh-table-head-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html:not([data-theme="dark"]) .shops-table thead th:first-child,
html:not([data-theme="dark"]) .new-page-wrapper .shops-table thead th:first-child,
html:not([data-theme="dark"]) .landers-page-wrapper .shops-table thead th:first-child,
html:not([data-theme="dark"]) #shopsTable thead th:first-child,
html:not([data-theme="dark"]) .new-page-wrapper #shopsTable thead th:first-child,
html:not([data-theme="dark"]) .explore-shops-results-card.is-layout-table #shopsTable thead th:first-child,
html:not([data-theme="dark"]) #std-similar-shops-table thead th:first-child {
    background-color: var(--wh-table-head-bg) !important;
}

/* Store Tracker */
html:not([data-theme="dark"]) #store-table.st-metrics-table thead,
html:not([data-theme="dark"]) #table-skeleton table.st-metrics-table thead {
    background-color: var(--wh-table-head-bg) !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    box-shadow: var(--wh-table-head-shadow) !important;
}

html:not([data-theme="dark"]) #store-table.st-metrics-table thead th,
html:not([data-theme="dark"]) #table-skeleton table.st-metrics-table thead th {
    background-color: var(--wh-table-head-bg) !important;
    color: var(--wh-table-head-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    vertical-align: middle !important;
}

/* TikTok Shop list tables */
html:not([data-theme="dark"]) #tiktok-category-table thead,
html:not([data-theme="dark"]) #tiktok-shop-table thead,
html:not([data-theme="dark"]) #tiktok-shop-table-clean thead,
html:not([data-theme="dark"]) #tiktok-creator-table thead,
html:not([data-theme="dark"]) #tiktok-product-table thead,
html:not([data-theme="dark"]) #tiktok-video-table thead,
html:not([data-theme="dark"]) [id^="tiktok-"][id$="-table"] table thead {
    background-color: var(--wh-table-head-bg) !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    box-shadow: var(--wh-table-head-shadow) !important;
}

html:not([data-theme="dark"]) #tiktok-category-table thead th,
html:not([data-theme="dark"]) #tiktok-shop-table thead th,
html:not([data-theme="dark"]) #tiktok-shop-table-clean thead th,
html:not([data-theme="dark"]) #tiktok-creator-table thead th,
html:not([data-theme="dark"]) #tiktok-product-table thead th,
html:not([data-theme="dark"]) #tiktok-video-table thead th,
html:not([data-theme="dark"]) [id^="tiktok-"][id$="-table"] table thead th {
    background-color: var(--wh-table-head-bg) !important;
    color: var(--wh-table-head-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    vertical-align: middle !important;
}

html:not([data-theme="dark"]) #tiktok-category-table thead th span,
html:not([data-theme="dark"]) #tiktok-shop-table thead th span,
html:not([data-theme="dark"]) #tiktok-shop-table-clean thead th span,
html:not([data-theme="dark"]) #tiktok-creator-table thead th span,
html:not([data-theme="dark"]) #tiktok-product-table thead th span,
html:not([data-theme="dark"]) #tiktok-video-table thead th span,
html:not([data-theme="dark"]) [id^="tiktok-"][id$="-table"] table thead th span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.25 !important;
}

/* TikTok detail ranking tables */
html:not([data-theme="dark"]) .tiktok-detail-ranking-scroll table thead,
html:not([data-theme="dark"]) .tiktok-detail-ranking-scope table thead {
    background-color: var(--wh-table-head-bg) !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    box-shadow: var(--wh-table-head-shadow) !important;
}

html:not([data-theme="dark"]) .tiktok-detail-ranking-scroll table thead th,
html:not([data-theme="dark"]) .tiktok-detail-ranking-scope table thead th {
    background-color: var(--wh-table-head-bg) !important;
    color: var(--wh-table-head-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--wh-table-head-border) !important;
    vertical-align: middle !important;
}

/* Sortable header hover — match brands / explore-shops */
html:not([data-theme="dark"]) .shops-table thead th.sortable:hover,
html:not([data-theme="dark"]) .new-page-wrapper .shops-table thead th.sortable:hover,
html:not([data-theme="dark"]) .landers-page-wrapper .shops-table thead th.sortable:hover,
html:not([data-theme="dark"]) #shopsTable thead th.sortable:hover,
html:not([data-theme="dark"]) .new-page-wrapper #shopsTable thead th.sortable:hover,
html:not([data-theme="dark"]) #std-similar-shops-table thead th.sortable:hover,
html:not([data-theme="dark"]) #store-table.st-metrics-table thead th:hover,
html:not([data-theme="dark"]) #table-skeleton table.st-metrics-table thead th:hover,
html:not([data-theme="dark"]) #tiktok-category-table thead th.sortable:hover,
html:not([data-theme="dark"]) #tiktok-shop-table thead th.sortable:hover,
html:not([data-theme="dark"]) #tiktok-shop-table-clean thead th.sortable:hover,
html:not([data-theme="dark"]) #tiktok-creator-table thead th.sortable:hover,
html:not([data-theme="dark"]) #tiktok-product-table thead th.sortable:hover,
html:not([data-theme="dark"]) #tiktok-video-table thead th.sortable:hover,
html:not([data-theme="dark"]) [id^="tiktok-"][id$="-table"] table thead th.sortable:hover,
html:not([data-theme="dark"]) .tiktok-detail-ranking-scroll table thead th:hover,
html:not([data-theme="dark"]) .tiktok-detail-ranking-scope table thead th:hover {
    background-color: var(--wh-table-head-hover-bg) !important;
    color: var(--wh-table-head-color) !important;
}