#price-index { --pi-panel: var(--ff-surface-muted); --pi-petrol: #087f78; --pi-diesel: #a85a08; }
html.dark #price-index { --pi-panel: var(--ff-surface-muted); --pi-petrol: #64d8ce; --pi-diesel: #f5b65c; }
#price-index .editorial-hero { margin-bottom: 0; border-bottom: 0; }
#price-index .editorial-hero > p:last-child { font-size: .875rem; }
#price-index .pi-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 18px 0; margin-bottom: 40px; border-block: 1px solid var(--pp-shell-line); }
#price-index .pi-nav a { color: var(--pp-shell-muted); padding: 8px 0; font-size: .9rem; font-weight: 600; }
#price-index .pi-nav a:hover { color: var(--pp-shell-accent); text-decoration: underline; }
#price-index section { scroll-margin-top: 100px; }
#price-index .pi-averages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin-bottom: 40px; }
#price-index .pi-fuel-summary { border-top: 3px solid var(--pp-shell-accent); padding-top: 22px; }
#price-index .pi-fuel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 28px; }
#price-index .pi-fuel-heading h2 { font-size: 1.6rem; font-weight: 650; }
#price-index .pi-fuel-heading h2 span { font-size: .85rem; color: var(--pp-shell-muted); margin-left: 8px; }
#price-index .pi-fuel-heading > span { font-size: .8rem; color: var(--pp-shell-muted); }
#price-index .pi-eyebrow { color: var(--pp-shell-muted); font-size: .8rem; font-weight: 600; margin-bottom: 8px; }
#price-index .pi-price { font-size: clamp(3.2rem,6vw,4.5rem); letter-spacing: -.045em; line-height: 1.1; color: var(--pp-shell-text); font-weight: 650; font-variant-numeric: tabular-nums; }
#price-index .pi-price span { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--pp-shell-muted); margin-left: 8px; }
#price-index .pi-fuel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pp-shell-line); }
#price-index .pi-fuel-facts dt { color: var(--pp-shell-muted); font-size: .8rem; margin-bottom: 5px; }
#price-index .pi-fuel-facts dd { color: var(--pp-shell-text); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
#price-index .pi-briefing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; background: var(--pi-panel); border: 1px solid var(--pp-shell-line); margin-bottom: 48px; }
#price-index .pi-briefing > div { flex: 1 1 300px; }
#price-index .pi-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--ff-action); border-radius: 6px; background: var(--ff-action); color: var(--ff-on-action) !important; font-size: .9rem; font-weight: 600; text-decoration: none; }
#price-index .pi-button:hover { background: color-mix(in srgb, var(--ff-action), #000 12%); }
#price-index .pi-button-secondary { background: var(--pp-shell-bg); color: var(--pp-shell-text) !important; border-color: var(--pp-shell-line); }
#price-index .pi-button-secondary:hover { border-color: var(--pp-shell-accent); background: var(--pi-panel); }
#price-index > section.editorial-panel { padding: 40px 0; margin-bottom: 0; }
#price-index section > h2 { font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 650; margin-bottom: 18px; }
#price-index .pi-chart-scroll { overflow-x: auto; margin-top: 24px; }
#price-index .pi-chart-scroll svg { min-width: 580px; }
#price-index .pi-chart-legend { flex-wrap: wrap; gap: 16px; }
#price-index summary { display: flex; align-items: center; min-height: 44px; padding: 12px 0; color: var(--pp-shell-accent); cursor: pointer; }
#price-index summary::before { content: '+'; margin-right: 12px; font-size: 1.2rem; }
#price-index details[open] summary::before { content: '−'; }
#price-index .pi-section-intro { color: var(--pp-shell-muted); margin: 0 0 24px; max-width: 720px; }
#price-index .pi-brand-tools { display: grid; gap: 8px; max-width: 420px; margin-bottom: 24px; }
#price-index .pi-brand-tools label { font-size: .9rem; font-weight: 600; }
#price-index input { min-height: 46px; width: 100%; background: var(--pp-shell-bg); color: var(--pp-shell-text); border: 1px solid var(--pp-shell-line); border-radius: 6px; padding: 10px 14px; }
#price-index input::placeholder { color: var(--pp-shell-muted); opacity: 1; }
#price-index th { font-size: .8rem; background: var(--pi-panel); }
#price-index :is(th,td) { padding: 16px 12px; }
#price-index tbody tr:hover { background: var(--pi-panel); }
#price-index .pi-show-brands { margin-top: 24px; }
#price-index .pi-no-results { color: var(--pp-shell-muted); padding: 24px 0; }
#price-index .pi-community, #price-index .pi-citation { background: var(--pi-panel); color: var(--pp-shell-text); border-top: 1px solid var(--pp-shell-line); padding: 32px; margin: 32px 0; }
#price-index .pi-community p { opacity: 1; }
#price-index .pi-community > p { color: var(--pp-shell-muted); max-width: 760px; line-height: 1.7; }
#price-index .pi-community .grid { text-align: left; padding-top: 24px; border-top: 1px solid var(--pp-shell-line); }
#price-index .pi-citation code { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }
#price-index .pi-map-cta { padding: 40px 0; text-align: left; }
#price-index .text-green-600 { color: var(--pp-shell-accent); }
#price-index #using-index-data a { color: var(--ff-accent-hover); }
#price-index .text-red-600 { color: #b42318; }
html.dark #price-index .text-red-600 { color: #ffaaa3; }
@media (max-width:640px) {
  #price-index .pi-averages { grid-template-columns: 1fr; gap: 32px; }
  #price-index .pi-nav { gap: 4px 22px; margin-bottom: 28px; }
  #price-index .pi-briefing, #price-index .pi-community, #price-index .pi-citation { padding: 20px; }
  #price-index .pi-community .grid { grid-template-columns: 1fr; text-align: left; }
  #price-index > section.editorial-panel { padding: 28px 0; }
  #price-index .pi-chart-legend > div { flex-wrap: wrap; }
  #price-index td:first-child { min-width: 130px; }
}