/* Compare The Deal — site layer on top of the 06-bold theme (theme.css). Only what the live pages add:
   active nav, hero stats + hottest-deal card, category counts, list bar, pager, feature pills, empty state, preview bar. */

/* Navigation: the current page is marked, not just hovered. */
.nav-links a[aria-current="page"] { background: var(--k); color: var(--y); border-radius: 10px; }

.preview-bar { background: var(--p); color: #fff; font-weight: 800; letter-spacing: .03em; text-align: center; padding: 8px 16px; border-bottom: var(--b); }

.hero .mega + .lead-b { margin-top: 18px; }

/* Hero facts: the theme's big-stat tiles, on the cream hero. */
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 580px; }
.hero-stats .bs { border: var(--b); box-shadow: var(--sh-sm); padding: 14px 18px; }
.hero-stats .bs b { font-size: clamp(30px, 4vw, 44px); }
.hero-stats .bs span { font-size: 12px; }

/* Hottest-deal card (the theme's .flash) — real deal, no fake discount or "claimed" bar. */
.flash .flash-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.flash .heat-badge { font-weight: 800; font-size: 22px; padding: 2px 12px; border: var(--b); border-radius: 12px; background: var(--w); }
.flash .heat-badge.is-hot { background: var(--p); color: #fff; }
.flash .heat-badge.is-cold { background: #7CE3FF; }
.flash .ends { display: block; font-weight: 800; font-size: 12px; letter-spacing: .08em; margin-bottom: 6px; }
.flash .flash-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.15; margin: 14px 0 10px; overflow-wrap: anywhere; }
.flash .flash-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; font-size: 14px; color: #444; margin: 8px 0 18px; }

/* Category tiles carry their real deal count. */
.section-cats { padding-top: 0; }
.cats .cat small { font-size: 12px; font-weight: 700; opacity: .75; }
.cats .cat[aria-current="page"] { box-shadow: var(--sh); transform: translate(-2px, -2px); outline: 3px solid var(--p); outline-offset: 2px; }

/* List bar: order chips + "Showing a–b of n". */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.list-bar .ctd-chip { border: var(--b); font-weight: 800; }
.list-bar .chip-clear { background: var(--y); }
.list-count { margin: 0; font-weight: 800; }

/* Deal card additions: feature pills, title wrapping, disabled link, report menu spacing. */
.deal h3 { overflow-wrap: anywhere; }
.deal .feats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; }
.deal .feats li { border: 2px solid var(--k); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 800; background: var(--cream); }
.deal .is-disabled { opacity: .5; pointer-events: none; }
.deal .ctd-report { margin-top: 10px; }

/* Pager. */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; }
.pager .pg { min-width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: var(--b); border-radius: 12px; background: var(--w); font-weight: 800; box-shadow: var(--sh-sm); transition: transform .1s, box-shadow .1s; }
.pager a.pg:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
.pager .pg.is-current { background: var(--k); color: var(--y); }
.pager .pg-gap { font-weight: 800; padding: 0 4px; }

/* Empty state (the theme's dashed .empty), with an icon and one way forward. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; background: var(--w); }
.empty-state .bi { font-size: 40px; }
.empty-state p { margin: 0; font-size: 20px; }

/* Sortable headers: the whole header cell is the sort button, not just its label. */
.lb th[data-sort] { padding: 0; }
.lb th[data-sort] .ctd-sort-btn { display: flex; width: 100%; box-sizing: border-box; padding: 14px 16px; }

/* Leaderboard / comparison titles are links to the deal. */
.lb td.ctd-td-main a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lb td.ctd-td-main b { white-space: normal; }

@media (max-width: 767.98px) {
  .hero-stats { margin-top: 20px; }
  .list-bar { flex-direction: column; align-items: flex-start; }
  .list-bar .ctd-chips { max-width: 100%; }
  .flash { transform: none; }
  .pager .pg-step { flex: 1 1 100%; order: 2; }
}