/* Products page + product detail upgrade — dark mode only */

/* ===== header: compact ===== */
html.kx-dark .prod-page .prod-head { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0 !important;
  border: 0 !important; box-shadow: none !important; background: none !important; margin-bottom: 16px; }
html.kx-dark .prod-page .prod-head .kx-page-kicker, html.kx-dark .prod-page .prod-head .page-sub, html.kx-dark .prod-page .prod-head-orbit { display: none !important; }
html.kx-dark .prod-page .prod-head .page-title { font-size: 30px !important; margin: 0 !important; }
html.kx-dark .prod-page .prod-head .page-title::after { display: none !important; }
html.kx-dark .prod-page #prod-add { flex: none; border-radius: 999px !important; padding: 11px 18px !important; }

/* ===== summary: 3 small tiles in one row ===== */
html.kx-dark .prod-page .prod-summary { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 10px !important; margin-bottom: 16px; }
html.kx-dark .prod-page .prod-summary > * { padding: 12px !important; min-height: 0 !important; border-radius: 16px !important; animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; }
html.kx-dark .prod-page .prod-summary > *:nth-child(2) { animation-delay: .08s } html.kx-dark .prod-page .prod-summary > *:nth-child(3) { animation-delay: .16s }
html.kx-dark .prod-page .prod-summary .stat-label { font-size: 11.5px !important; color: #9fb8b2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kx-dark .prod-page .prod-summary .stat-label .kx-q, html.kx-dark .prod-page .prod-summary p, html.kx-dark .prod-page .prod-summary .stat-sub, html.kx-dark .prod-page .prod-summary small { display: none !important; }
html.kx-dark .prod-page .prod-summary .stat-value { font-size: clamp(20px, 6vw, 30px) !important; color: #fff; text-shadow: 0 0 16px rgba(127,243,221,.4); }

/* ===== toolbar ===== */
html.kx-dark .prod-page .prod-chips { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px; }
html.kx-dark .prod-page .prod-chips::-webkit-scrollbar { display: none; }
html.kx-dark .prod-page .prod-chips > * { flex: none; border-radius: 999px !important; }
html.kx-dark .prod-page .prod-toolbar { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 12px; }
html.kx-dark .prod-page .prod-tools { display: grid !important; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
html.kx-dark .prod-page .prod-tools input, html.kx-dark .prod-page .prod-tools select { width: 100% !important; border-radius: 999px !important; }
html.kx-dark .prod-page .prod-stage-hint { display: none !important; }

/* ===== product cards: compact ===== */
html.kx-dark .prod-page .prod-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
@media (min-width: 760px) { html.kx-dark .prod-page .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (min-width: 1150px) { html.kx-dark .prod-page .prod-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
html.kx-dark .prod-page .prod-card { position: relative; display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "ring name money" "ring top money" "bar bar bar" "foot foot foot";
  gap: 4px 12px; align-items: center; padding: 14px !important; border-radius: 20px !important; cursor: pointer; overflow: hidden;
  animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; transition: transform .25s cubic-bezier(.2,1.3,.3,1), box-shadow .25s !important; }
html.kx-dark .prod-page .prod-card:hover { transform: translateY(-3px); box-shadow: 0 0 28px rgba(127,243,221,.3) !important; }
html.kx-dark .prod-page .prod-card:active { transform: scale(.98); }
html.kx-dark .prod-page .prod-card .kx-score { grid-area: ring; display: block !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
html.kx-dark .prod-page .prod-card .kx-score > div:not(.kx-score-ring) { display: none !important; }
html.kx-dark .prod-page .prod-card .kx-score-ring { width: 54px !important; height: 54px !important; }
html.kx-dark .prod-page .prod-card .kx-score-ring b { font-size: 18px !important; }
html.kx-dark .prod-page .prod-card .prod-card-name { grid-area: name; margin: 0 !important; font-size: 16px !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kx-dark .prod-page .prod-card .prod-card-name a { color: #fff !important; text-decoration: none; }
html.kx-dark .prod-page .prod-card .prod-card-top { grid-area: top; display: flex; gap: 6px; margin: 0 !important; flex-wrap: wrap; }
html.kx-dark .prod-page .prod-card .prod-card-top > * { font-size: 11px !important; padding: 3px 9px !important; border-radius: 999px !important; }
html.kx-dark .prod-page .prod-card .prod-profit { grid-area: money; display: flex !important; flex-direction: column; align-items: flex-end; gap: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
html.kx-dark .prod-page .prod-card .prod-profit .stat-label { font-size: 10.5px !important; color: #8fa6a0 !important; }
html.kx-dark .prod-page .prod-card .prod-profit-val { font-size: 19px !important; color: #3cf08f; text-shadow: 0 0 12px rgba(60,240,143,.35); }
html.kx-dark .prod-page .prod-card .prod-profit-val .muted { font-size: 12px; color: #8fa6a0; text-shadow: none; }
html.kx-dark .prod-page .prod-card .prod-margin-num { display: flex; gap: 4px; align-items: baseline; font-size: 12px; color: #9fb8b2; }
html.kx-dark .prod-page .prod-card .prod-margin-num .stat-label { display: none; }
html.kx-dark .prod-page .prod-card .prod-bar { grid-area: bar; margin: 8px 0 2px !important; height: 5px !important; border-radius: 99px; }
html.kx-dark .prod-page .prod-card .prod-bar-fill { box-shadow: 0 0 10px currentColor; }
html.kx-dark .prod-page .prod-card .prod-verdict, html.kx-dark .prod-page .prod-card .prod-meaning, html.kx-dark .prod-page .prod-card .prod-mini, html.kx-dark .prod-page .prod-card .prod-by { display: none !important; }
html.kx-dark .prod-page .prod-card .prod-card-foot { grid-area: foot; display: block !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; }
html.kx-dark .prod-page .prod-card .prod-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
html.kx-dark .prod-page .prod-card .prod-actions .btn { min-height: 34px !important; padding: 6px 4px !important; font-size: 12px !important; border-radius: 12px !important; white-space: nowrap; }
html.kx-dark .prod-page .prod-card .kx-cmp-check { position: absolute; top: 10px; right: 10px; display: none !important; }
html.kx-dark .prod-page .prod-card:hover .kx-cmp-check, html.kx-dark .prod-page .prod-card .kx-cmp-check:has(input:checked) { display: inline-flex !important; }
html.kx-dark .prod-page .prod-card.prod-tone-good::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: #3cf08f; box-shadow: 0 0 10px #3cf08f; }

/* ===== product detail (/products/:id) ===== */
html.kx-dark .kx-pd .card, html.kx-dark .page-product .card { animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; }

/* ===== search deep-dive page (kx-pv) ===== */
html.kx-dark .kx-pv .kx-pv-listing img, html.kx-dark .kx-pv img.kx-pv-hero { border-radius: 18px; box-shadow: 0 0 40px rgba(127,243,221,.18); }
html.kx-dark .kx-pv .kx-in { animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) { html.kx-dark .prod-page *, html.kx-dark .kx-pv * { animation: none !important; } }
/* fixes: card height, header copy width, summary spans */
html.kx-dark .prod-page .prod-card { min-height: 0 !important; height: auto !important; grid-template-rows: auto auto auto auto !important; }
html.kx-dark .prod-page .prod-head-copy { flex: 1; min-width: 0; width: auto !important; }
html.kx-dark .prod-page #prod-add { width: auto !important; }
html.kx-dark .prod-page .prod-summary > * { grid-column: auto !important; }
html.kx-dark .prod-page .prod-card .prod-card-top { align-self: start; }
html.kx-dark .prod-page .prod-card .prod-card-name { align-self: end; }
html.kx-dark .prod-page .prod-head { min-height: 0 !important; }
html.kx-dark .prod-page .prod-summary .stat-note, html.kx-dark .prod-page .prod-summary .tooltip { display: none !important; }
/* product detail: profit + margin as two glowing tiles side by side */
html.kx-dark .kx-product-detail .kx-profit-card .grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; }
html.kx-dark .kx-product-detail .kx-profit-card .grid-2 > div { background: transparent !important; border: 1.6px dotted rgba(127,243,221,.55) !important; border-radius: 16px !important; box-shadow: 0 0 18px rgba(0,201,167,.15); animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both .2s; }
html.kx-dark .kx-product-detail #profit-val, html.kx-dark .kx-product-detail #margin-val { font-size: clamp(22px, 7vw, 32px) !important; font-weight: 800; text-shadow: 0 0 16px currentColor; }
html.kx-dark .kx-product-detail #margin-val { color: #7ff3dd; }
html.kx-dark .kx-product-detail .page-title { font-size: clamp(28px, 8vw, 44px) !important; }
html.kx-dark .kx-product-detail .page-title::after { display: none !important; }
html.kx-dark .kx-product-detail .card { animation: upTileIn .6s cubic-bezier(.22,1,.36,1) both; }
html.kx-dark .kx-product-detail .grid-2 > .card:nth-child(2) { animation-delay: .1s; }
/* quick stats rows: hover glow */
html.kx-dark .kx-product-detail .kx-quick-card [class*="row"], html.kx-dark .kx-product-detail .kx-quick-card li { transition: background .2s; border-radius: 10px; }
html.kx-dark .kx-product-detail .kx-quick-card [class*="row"]:hover { background: rgba(127,243,221,.06); }