/*
 * T05 Rankings / T07 Product Compare parity layer.
 * Scoped to the two template roots so the final-design structure does not leak
 * into shared WordPress chrome.
 */
[data-hq-template="rankings"],
[data-hq-template="compare"] {
  --hq-tools-surface: rgba(255, 255, 255, .8);
  --hq-tools-surface-soft: rgba(255, 255, 255, .6);
  --hq-tools-line: rgba(228, 228, 231, .8);
  --hq-tools-text: #18181b;
  --hq-tools-muted: #52525b;
  --hq-tools-green: #047857;
  --hq-tools-shadow: 0 25px 50px -12px rgba(0, 0, 0, .2);
  color: var(--hq-tools-text);
}

html.dark [data-hq-template="rankings"],
html.dark [data-hq-template="compare"] {
  --hq-tools-surface: rgba(6, 12, 10, .88);
  --hq-tools-surface-soft: rgba(0, 0, 0, .5);
  --hq-tools-line: rgba(255, 255, 255, .1);
  --hq-tools-text: #fafafa;
  --hq-tools-muted: #a1a1aa;
  --hq-tools-green: #34d399;
  --hq-tools-shadow: 0 25px 50px -12px rgba(0, 0, 0, .7);
}

#template-rankings {
  width: 100%;
  position: relative;
  border-bottom: 8px solid rgb(228 228 231);
  padding-block: 2rem;
}
html.dark #template-rankings { border-bottom-color: rgba(255, 255, 255, .05); }
#template-rankings > .max-w-\[1600px\] { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: 1rem; }
#template-rankings .hq-hero-glass { min-block-size:18rem; }
#template-rankings .hq-h1 { font-size:clamp(1.8rem,1.45rem + 1.4vw,2.375rem) !important; font-weight:800 !important; line-height:1.16 !important; }
#template-rankings .hq-riso,
#template-rankings .hq-hero-glass__pane,
#template-rankings .hq-hero-glass__sheen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#template-rankings .hq-riso { z-index: -2; }
#template-rankings .hq-hero-glass__pane,
#template-rankings .hq-hero-glass__sheen { z-index: 0; }
#template-rankings .hq-rankings-category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
#template-rankings .hq-rankings-category-grid > a { min-height: 11.4rem; }
#template-rankings .hq-rank-sync-note { margin-top:.75rem; }
#template-rankings :is(.hq-rank-tab, .hq-uc-tab, .hq-rank-card) { min-height: 44px; }
#template-rankings .hq-rank-card { flex-wrap:wrap; background:var(--hq-tools-surface); border-color:var(--hq-tools-line); }
#template-rankings :is(.hq-rank-card, .hq-rankings-category-grid) .truncate { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
#template-rankings .hq-rank-empty { color: var(--hq-tools-muted); }

/* Rank badge — neutral by default, medal colours for the podium. */
#template-rankings .hq-rank-badge { background:#f1f5f9; color:#475569; }
html.dark #template-rankings .hq-rank-badge { background:rgba(255,255,255,.08); color:#cbd5e1; }
#template-rankings .hq-rank-badge.hq-medal-1 { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#7c2d12; box-shadow:0 2px 10px -2px rgba(245,158,11,.5); }
#template-rankings .hq-rank-badge.hq-medal-2 { background:linear-gradient(135deg,#e2e8f0,#94a3b8); color:#1e293b; }
#template-rankings .hq-rank-badge.hq-medal-3 { background:linear-gradient(135deg,#fed7aa,#c2764a); color:#4a2410; }
html.dark #template-rankings .hq-rank-badge.hq-medal-1 { color:#451a03; }
html.dark #template-rankings .hq-rank-badge.hq-medal-2 { color:#0f172a; }
html.dark #template-rankings .hq-rank-badge.hq-medal-3 { color:#2a1305; }

#template-rankings .hq-rank-score { font-variant-numeric:tabular-nums; }
#template-rankings .hq-rank-score.is-hi  { background:rgba(16,185,129,.14); color:#047857; }
#template-rankings .hq-rank-score.is-mid { background:rgba(245,158,11,.14); color:#b45309; }
#template-rankings .hq-rank-score.is-lo  { background:rgba(100,116,139,.14); color:#475569; }
html.dark #template-rankings .hq-rank-score.is-hi  { background:rgba(16,185,129,.16); color:#6ee7b7; }
html.dark #template-rankings .hq-rank-score.is-mid { background:rgba(245,158,11,.16); color:#fcd34d; }
html.dark #template-rankings .hq-rank-score.is-lo  { background:rgba(148,163,184,.16); color:#cbd5e1; }
#template-rankings .hq-rank-unscored { background:rgba(100,116,139,.12); color:#475569; }
html.dark #template-rankings .hq-rank-unscored { background:rgba(148,163,184,.14); color:#cbd5e1; }
#template-rankings .hq-rank-neutral-marker { background:rgba(100,116,139,.12); color:#475569; }
html.dark #template-rankings .hq-rank-neutral-marker { background:rgba(148,163,184,.14); color:#cbd5e1; }
#template-rankings .hq-rank-neutral-dot { width:.5rem; height:.5rem; flex:none; border-radius:9999px; background:#a1a1aa; box-shadow:0 0 0 3px rgba(161,161,170,.14); }
html.dark #template-rankings .hq-rank-neutral-dot { background:#71717a; box-shadow:0 0 0 3px rgba(113,113,122,.2); }

#template-rankings .hq-rank-sub-chip { font-size:10px; line-height:1.2; background:rgba(100,116,139,.12); color:#475569; }
html.dark #template-rankings .hq-rank-sub-chip { background:rgba(148,163,184,.14); color:#cbd5e1; }
#template-rankings .hq-rank-sub-chip.is-headline { background:rgba(16,185,129,.14); color:#047857; }
html.dark #template-rankings .hq-rank-sub-chip.is-headline { background:rgba(16,185,129,.18); color:#6ee7b7; }
#template-rankings .hq-rank-tabs,
#template-rankings .hq-uc-tabs { scrollbar-width:none; -ms-overflow-style:none; }
#template-rankings .hq-rank-tabs::-webkit-scrollbar,
#template-rankings .hq-uc-tabs::-webkit-scrollbar { display:none; }
#template-rankings .xs\:inline { display:none; }
#template-rankings .hq-rank-card .text-\[9px\]  { font-size:9px; }
#template-rankings .hq-rank-card .text-\[15px\] { font-size:15px; }
#template-rankings .hq-rank-tab .text-\[10px\] { font-size:10px; }
#template-rankings .hq-rank-colhead.text-\[11px\],
#template-rankings .hq-rank-card .text-\[11px\] { font-size:11px; }

#template-rankings .hq-uc-tab { display:inline-flex; align-items:center; white-space:nowrap; flex-shrink:0; border:1px solid #e2e8f0; background:rgba(255,255,255,.7); color:#334155; border-radius:9999px; padding:.375rem .875rem; font-size:12px; font-weight:700; line-height:1.15; transition:border-color .15s ease, background .15s ease, color .15s ease; }
#template-rankings .hq-uc-tab:hover { border-color:rgba(16,185,129,.55); color:#047857; }
#template-rankings .hq-uc-tab.is-active { border-color:#059669; background:#059669; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
html.dark #template-rankings .hq-uc-tab { border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:#cbd5e1; }
html.dark #template-rankings .hq-uc-tab:hover { border-color:rgba(16,185,129,.5); color:#6ee7b7; }
html.dark #template-rankings .hq-uc-tab.is-active { border-color:#34d399; background:#10b981; color:#04160e; }

#template-rankings .hq-rank-card.is-bestvalue { border-color:rgba(16,185,129,.55); box-shadow:0 0 0 1px rgba(16,185,129,.22), 0 8px 22px -12px rgba(16,185,129,.45); }
html.dark #template-rankings .hq-rank-card.is-bestvalue { border-color:rgba(16,185,129,.5); box-shadow:0 0 0 1px rgba(16,185,129,.28), 0 8px 22px -12px rgba(16,185,129,.5); }
#template-rankings .hq-rank-bestvalue { font-size:10px; line-height:1.2; letter-spacing:.02em; background:rgba(16,185,129,.14); color:#047857; }
html.dark #template-rankings .hq-rank-bestvalue { background:rgba(16,185,129,.22); color:#6ee7b7; }
#template-rankings .hq-rank-pointers { list-style:none; padding-left:0; }
#template-rankings .hq-rank-pointers li { position:relative; padding-left:1.15rem; color:#475569; }
html.dark #template-rankings .hq-rank-pointers li { color:#cbd5e1; }
#template-rankings .hq-rank-pointers li::before { content:""; position:absolute; left:.15rem; top:.5em; width:.4rem; height:.4rem; border-radius:9999px; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.16); }
#template-rankings .hq-rank-pointers strong { color:#0f172a; font-weight:800; }
html.dark #template-rankings .hq-rank-pointers strong { color:#f1f5f9; }

#template-rankings .hq-bv-spot { display:flex; align-items:center; gap:.875rem; width:100%; border-radius:1rem; padding:.75rem .875rem; text-decoration:none; border:1px solid rgba(16,185,129,.45); background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(16,185,129,.03) 60%), rgba(255,255,255,.75); box-shadow:0 0 0 1px rgba(16,185,129,.14), 0 10px 26px -14px rgba(16,185,129,.5); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
#template-rankings .hq-bv-spot:hover { transform:translateY(-1px); border-color:rgba(16,185,129,.7); box-shadow:0 0 0 1px rgba(16,185,129,.22), 0 14px 30px -14px rgba(16,185,129,.6); }
html.dark #template-rankings .hq-bv-spot { border-color:rgba(16,185,129,.42); background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,.06) 60%), rgba(255,255,255,.10); box-shadow:0 0 0 1px rgba(16,185,129,.2), 0 10px 26px -14px rgba(16,185,129,.55); }
#template-rankings .hq-bv-spot-tag { flex-shrink:0; display:inline-flex; align-items:center; gap:.25rem; border-radius:9999px; padding:.25rem .625rem; font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; background:#059669; color:#fff; }
html.dark #template-rankings .hq-bv-spot-tag { background:#10b981; color:#04160e; }
#template-rankings .hq-bv-spot-thumb { flex-shrink:0; display:none; height:3rem; width:3rem; overflow:hidden; align-items:center; justify-content:center; border-radius:.75rem; background:#f1f5f9; }
html.dark #template-rankings .hq-bv-spot-thumb { background:#e2e8f0; }
#template-rankings .hq-bv-spot-thumb img { height:100%; width:100%; object-fit:contain; mix-blend-mode:multiply; }
#template-rankings .hq-bv-spot-body { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:.125rem; }
#template-rankings .hq-bv-spot-name { font-size:.875rem; font-weight:800; line-height:1.25; color:#0f172a; overflow-wrap:anywhere; }
html.dark #template-rankings .hq-bv-spot-name { color:#f0fdf4; }
#template-rankings .hq-bv-spot-meta { font-size:11px; font-weight:700; line-height:1.3; color:#059669; }
html.dark #template-rankings .hq-bv-spot-meta { color:#a7f3d0; }
#template-rankings .hq-bv-spot-dot { margin:0 .3rem; opacity:.5; }
#template-rankings .hq-bv-spot-price { flex-shrink:0; font-size:15px; font-weight:900; letter-spacing:-.01em; color:#065f46; font-variant-numeric:tabular-nums; }
html.dark #template-rankings .hq-bv-spot-price { color:#6ee7b7; }

/* T07 uses glass for discovery controls and solid, readable result surfaces. */
[data-hq-template="compare"] { width: 100%; min-height: 0; }
[data-hq-template="compare"] [data-hq-compare-hero] {
  min-height: 0 !important;
  display: block !important;
  padding-block:2rem 1.5rem !important;
}
@media (min-width: 768px) {
  [data-hq-template="compare"] [data-hq-compare-hero] { padding-block-start:2.5rem !important; }
}
[data-hq-template="compare"] [data-hq-compare-hero] > .relative { width: 100%; }
[data-hq-template="compare"] #compare-hero-title { font-size:clamp(1.75rem,1.30rem + 2.05vw,2.375rem) !important; line-height:1.16 !important; font-weight:800 !important; }
[data-hq-template="compare"] [data-hq-compare-examples] {
  padding-block:clamp(1rem,2.5vw,2rem) 0 !important;
}
[data-hq-template="compare"] [data-hq-compare-examples]::before { content: none !important; }
[data-hq-template="compare"] .hq-compare-search,
[data-hq-template="compare"] #compare-search-results,
[data-hq-template="compare"] .hq-matchup { backdrop-filter: blur(64px) saturate(150%); }
[data-hq-template="compare"] #compare-search-input { min-height: 48px; }
[data-hq-template="compare"] #compare-search-results { z-index: 50; }
[data-hq-template="compare"] .hq-compare-selection-state {
  width:min(48rem,100%);
  margin:0 auto 1rem;
  border:1px solid rgba(16,185,129,.28);
  border-radius:9999px;
  background:rgba(16,185,129,.08);
  padding:.625rem 1rem;
  text-align:center;
  color:#047857;
  font-size:.75rem;
  font-weight:700;
}
html.dark [data-hq-template="compare"] .hq-compare-selection-state { color:#6ee7b7; background:rgba(16,185,129,.12); }
[data-hq-template="compare"] .hq-compare-selection-state.is-error { border-color:rgba(220,38,38,.28); background:rgba(220,38,38,.08); color:#b91c1c; }
html.dark [data-hq-template="compare"] .hq-compare-selection-state.is-error { color:#fca5a5; }
[data-hq-template="compare"] #compare-search-results button,
[data-hq-template="compare"] .hq-matchup,
[data-hq-template="compare"] button,
[data-hq-template="compare"] a[class*="inline-flex"] { min-height: 44px; }
[data-hq-template="compare"] .hq-compare-preset-group { margin-bottom: 2rem; }
[data-hq-template="compare"] .hq-compare-preset-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
[data-hq-template="compare"] .hq-matchup { min-height:7.125rem; padding:1rem !important; background:var(--hq-tools-surface-soft); border-color:var(--hq-tools-line); align-items:stretch; }
[data-hq-template="compare"] .hq-matchup-category { display:none; }
[data-hq-template="compare"] .hq-matchup-names { min-height:2.5rem; line-height:1.2; flex-wrap:wrap; justify-content:center; overflow-wrap:anywhere; text-align:center; }
[data-hq-template="compare"] .hq-matchup-product { min-width:min(7rem,100%); white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
[data-hq-template="compare"] .hq-matchup-versus { line-height:1rem; }
[data-hq-template="compare"] .hq-matchup-meta { display:block; min-height:1rem; text-align:center; overflow-wrap:anywhere; }
[data-hq-template="compare"] .hq-matchup-action { margin-top:auto !important; min-height:1.25rem !important; width:100%; text-align:center; }
[data-hq-template="compare"] #comparison-table-wrap,
[data-hq-template="compare"] #compare-vs { background:#fff; border-color:rgba(24,24,27,.1); box-shadow:var(--hq-tools-shadow); backdrop-filter:none; }
html.dark [data-hq-template="compare"] #comparison-table-wrap,
html.dark [data-hq-template="compare"] #compare-vs { background:#111318; border-color:rgba(255,255,255,.1); }
[data-hq-template="compare"] #comparison-table-wrap :is(th, td) { vertical-align:middle; }
[data-hq-template="compare"] .hq-vs-all summary { list-style:none; }
[data-hq-template="compare"] .hq-vs-all summary::-webkit-details-marker { display:none; }

@media (min-width: 420px) {
  #template-rankings .xs\:inline { display:inline; }
  #template-rankings .hq-bv-spot-thumb { display:flex; }
}

@media (min-width: 640px) {
  #template-rankings .hq-rankings-category-grid,
  [data-hq-template="compare"] .hq-compare-preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #template-rankings .hq-rank-card .sm\:block { display:block !important; }
  #template-rankings .hq-rank-card .sm\:flex { display:flex !important; }
  #template-rankings .hq-rank-card .sm\:h-12 { height:3rem !important; }
  #template-rankings .hq-rank-card .sm\:w-16 { width:4rem !important; }
  #template-rankings .hq-rank-card .sm\:h-16 { height:4rem !important; }
  #template-rankings .hq-rank-card .sm\:gap-4 { gap:1rem !important; }
  #template-rankings .hq-rank-card .sm\:p-4 { padding:1rem !important; }
  #template-rankings .hq-rank-card .sm\:text-lg { font-size:1.125rem; line-height:1.75rem; }
  #template-rankings .hq-rank-card .sm\:w-12 { width:3rem !important; }
  #template-rankings .hq-rank-card .sm\:hidden { display:none !important; }
  #template-rankings .hq-rank-tabs.sm\:flex-wrap { flex-wrap:wrap !important; }
  #template-rankings .hq-rank-tabs.sm\:overflow-visible { overflow:visible !important; }
}

@media (min-width: 1024px) {
  #template-rankings > .max-w-\[1600px\] { padding-inline:2rem; }
  #template-rankings .hq-rankings-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  [data-hq-template="compare"] .hq-compare-preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width: 639px) {
  [data-hq-template="compare"] #comparison-table-wrap { border-radius:1rem; }
  [data-hq-template="compare"] #compare-vs { border-radius:1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-hq-template="rankings"] *,
  [data-hq-template="compare"] * { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}