/* Editorial comparison layout. Enabled per guide in the content data. */
body:has(.guide-editorial) {
  --ink: #121a2b;
  --muted: #5e6779;
  --line: #d9dee7;
  --gold-btn: #e9a23b;
  --gold-btn-h: #dc922d;
  --good: #1c7c54;
  --good-soft: #eef7f2;
  --bad-soft: #fbf2f1;
}
body:has(.guide-editorial) .wrap { max-width: 1152px; }
body:has(.guide-editorial) > header { position: relative; }
body:has(.guide-editorial) .nav { height: 68px; }
body:has(.guide-editorial) .links { gap: 26px; font-weight: 600; }
body:has(.guide-editorial) .links [aria-current] { color: var(--brand); }
body:has(.guide-editorial) .logo-name { font-size: 24px; }
body:has(.guide-editorial) :focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.guide-editorial { padding-bottom: 48px; }
.guide-editorial h1, .guide-editorial h2, .guide-editorial h3 { text-wrap: balance; }
.guide-editorial .g-head { padding: 24px 0 28px; }
.guide-editorial .g-crumbs { margin-bottom: 26px; }
.guide-editorial .btn-dark { padding: 8px 13px; border-radius: 6px; }
.guide-editorial .g-head h1 {
  max-width: 768px;
  font-size: clamp(30px, 3vw, 41px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 14px 0 20px;
}
.guide-editorial .g-head .dek { max-width: 768px; font-size: 18px; line-height: 1.65; }
.guide-editorial .g-byline { margin-top: 26px; gap: 8px 18px; font-size: 13px; }
.guide-editorial .disclose { max-width: 768px; border-radius: 6px; margin-top: 20px; line-height: 1.5; }
.guide-editorial .eyebrow { font-size: 11.5px; letter-spacing: .13em; }

/* An original data graphic fills the lead-image position without posing as a product photograph. */
.guide-editorial .battery-hero { margin-top: 28px; }
.battery-visual { display: grid; grid-template-columns: 1fr 1.35fr; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.battery-feature { padding: 38px 36px; background: var(--ink); color: #fff; }
.battery-feature .eyebrow { color: #f3bb64; }
.battery-number { font-size: clamp(42px, 5vw, 64px); font-weight: 700; line-height: 1.2; margin: 22px 0 10px; letter-spacing: -.055em; }
.battery-number span { font-size: 19px; margin-left: 8px; letter-spacing: 0; color: #c4cbd9; }
.battery-name { font-size: 19px; font-weight: 700; line-height: 1.35; }
.battery-feature p { color: #b8c1d3; font-size: 13px; margin-top: 8px; }
.battery-comparison { padding: 36px; display: grid; align-content: center; gap: 22px; }
.battery-label { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.4; color: var(--text); }
.battery-label b { white-space: nowrap; font-size: 12px; color: var(--ink); }
.battery-row.leading .battery-label { font-weight: 700; }
.battery-track { height: 12px; background: #eef0f5; margin-top: 9px; border-radius: 3px; overflow: hidden; }
.battery-track span { height: 100%; display: block; background: #9aa5bd; border-radius: 3px; }
.battery-row.leading .battery-track span { background: var(--gold-btn); }
.guide-editorial .g-hero figcaption { font-size: 12px; line-height: 1.5; margin-top: 8px; }
.guide-editorial .g-hero:not(.lineup) > img { height: clamp(280px, 45vw, 520px); object-fit: contain; background: #f0ece4; border: 1px solid var(--line); border-radius: 8px; }

.guide-editorial .statbar { border-radius: 8px; margin-top: 26px; }
.guide-editorial .statbar div { padding: 17px 16px; }
.guide-editorial .statbar dt { font-size: 11.5px; }
.guide-editorial .statbar dd { font-size: 26px; margin-top: 5px; }
.guide-editorial .topgrid { gap: 24px; margin-top: 32px; }
.guide-editorial .short { background: #edf0fa; border-color: #cdd5ee; padding: 25px; border-radius: 8px; }
.guide-editorial .short h2 { font-size: 22px; line-height: 1.3; margin: 10px 0 14px; }
.guide-editorial .short p { font-size: 17px; line-height: 1.65; }
.guide-editorial .ranklist { margin-top: 13px; }
.guide-editorial .ranklist li { padding: 8px 0; gap: 9px; align-items: baseline; }
.guide-editorial .ranklist li + li { border-top: 1px solid #dce1f1; }
.guide-editorial .ranklist a { line-height: 1.4; flex: 1; }
.guide-editorial .ranklist .dots { display: none; }
.guide-editorial .ranklist .mono { white-space: nowrap; font-size: 12px; }
.guide-editorial .short-links { gap: 8px; margin-top: 18px; flex-direction: column; font-size: 13px; }
.guide-editorial .win-card { border-radius: 8px; padding: 28px 24px 22px; }
.guide-editorial .win-tab { font-size: 10.5px; padding: 5px 10px; border-radius: 4px; }
.guide-editorial .win-top { gap: 16px; margin: 15px 0 18px; }
.guide-editorial .win-img { width: 112px; height: 112px; }
.guide-editorial .win-name { font-size: 20px; line-height: 1.35; }
.guide-editorial .win-score b { font-size: 20px; }
.guide-editorial .chips { gap: 8px; }
.guide-editorial .chip-f { font-size: 12px; padding: 5px 9px; border-radius: 4px; }
.guide-editorial .win-price { font-size: 26px; }
.guide-editorial .btn { border-radius: 6px; line-height: 1.4; }
.guide-editorial .btn-gold { padding: 12px 16px; font-size: 15px; }
.guide-editorial .win-note { line-height: 1.5; font-size: 12px; }
.guide-editorial .win-more { margin-top: 9px; }

.guide-editorial .g-sec { margin-top: 56px; scroll-margin-top: 24px; }
.guide-editorial .g-sec h2.ul { font-size: clamp(25px, 2.3vw, 28px); line-height: 1.25; border-bottom-width: 3px; padding-bottom: 14px; margin-bottom: 22px; }
.guide-editorial .g-sec h2.ul::after { height: 3px; bottom: -3px; }
.guide-editorial .g-sec p, .guide-editorial .g-sec li { font-size: 18px; line-height: 1.72; }
.guide-editorial .g-sec p + p { margin-top: 16px; }
.guide-editorial #buying { max-width: none; }
.guide-editorial .lf-grid { gap: 16px; }
.guide-editorial .lf { padding: 22px; border-radius: 8px; }
.guide-editorial .lf.bad { background: #fff; }
.guide-editorial .lf h3 { font-size: 17px; }
.guide-editorial .lf li { font-size: 14px; line-height: 1.6; margin: 12px 0; }
.guide-editorial .ck { width: 17px; height: 17px; margin-top: 2px; }
.guide-editorial .ctable { border-radius: 8px; }
.guide-editorial .ctable th { font-size: 10px; line-height: 1.5; padding: 14px 11px; }
.guide-editorial .ctable td { padding: 17px 11px; font-size: 13px; }
.guide-editorial .ctable .pname { min-width: 180px; }
.guide-editorial .g-cols { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
.guide-editorial .g-side { top: 24px; margin-top: 56px; gap: 16px; }
.guide-editorial .side-win { background: #fff; border-color: #f0bf79; padding: 20px; border-radius: 8px; }
.guide-editorial .side-win .win-name { font-size: 17px; }
.guide-editorial .sw-img { height: 160px; }
.guide-editorial .sw-img svg { max-height: 125px; }
.guide-editorial .side-jump { border-radius: 8px; padding: 20px; }
.guide-editorial .side-jump a { line-height: 1.5; padding: 7px 0 7px 8px; border-left: 2px solid transparent; }
.guide-editorial .side-jump a.active { border-left-color: var(--brand); background: #f4f6fc; }

.guide-editorial .pcard { border-radius: 8px; margin-top: 24px; scroll-margin-top: 24px; }
.guide-editorial .pc-banner { font-size: 11px; padding: 10px 20px; }
.guide-editorial .pc-head { padding: 17px 20px; gap: 12px; }
.guide-editorial .pc-head h3 { font-size: 23px; line-height: 1.3; }
.guide-editorial .pc-head .num { width: 32px; height: 32px; font-size: 14px; }
.guide-editorial .pc-body { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px; }
.guide-editorial .p-photo { height: 250px; background: #f7f8fb; border: 1px solid #edf0f5; border-radius: 6px; }
.guide-editorial .p-photo svg { width: 56%; opacity: .85; }
.guide-editorial .p-photo img { max-height: 230px; }
.guide-editorial .pc-side { gap: 20px; }
.guide-editorial .pc-score { justify-content: center; gap: 20px; }
.guide-editorial .gauge { width: 84px; }
.guide-editorial .gauge svg { width: 84px; }
.guide-editorial .gauge b { font-size: 21px; }
.guide-editorial .gauge svg path:last-of-type { stroke: var(--gold-btn); }
.guide-editorial .cbars { gap: 13px; }
.guide-editorial .cbar .cb-top { font-size: 12px; line-height: 1.5; }
.guide-editorial .cb-track { height: 6px; }
.guide-editorial .pc-rating { color: var(--muted); line-height: 1.6; }
.guide-editorial .verdict-box { padding: 17px 18px; background: #fcf5e9; border-radius: 6px; }
.guide-editorial .verdict-box p { font-size: 15.5px !important; line-height: 1.55 !important; }
.guide-editorial .pc-main > p { font-size: 17px; margin-top: 17px; }
.guide-editorial .likes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; align-items: start; }
.guide-editorial .lk { padding: 16px; border-radius: 6px; min-width: 0; }
.guide-editorial .lk h4 { font-size: 11px; }
.guide-editorial .lk ul { list-style: none; padding-left: 0; margin-top: 8px; }
.guide-editorial .lk li { position: relative; padding-left: 14px; font-size: 14.5px !important; line-height: 1.4 !important; margin: 8px 0; }
.guide-editorial .lk li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.guide-editorial .lk.bad li::before { background: var(--bad); }
.guide-editorial .specs { margin-top: 20px; border-radius: 6px; }
.guide-editorial .specs td { padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
.guide-editorial .specs td:first-child { width: 43%; }
.guide-editorial .bestfor { line-height: 1.65 !important; }
.comparison-verdict { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.comparison-verdict > b { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.guide-editorial .comparison-verdict p { margin-top: 7px; font-size: 15px; }
.pc-purchase { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--line); }
.guide-editorial .pc-purchase .win-price { margin: 0; padding: 0; font-size: 23px; }
.guide-editorial .pc-purchase .btn { margin: 0; font-size: 13px; }
.guide-editorial .final-card { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; border-radius: 8px; padding: 24px; }
.guide-editorial .final-card h3 { font-size: 23px; line-height: 1.3; }
.guide-editorial .feat li { font-size: 14px; line-height: 1.5; }
.guide-editorial .fc-buy { flex-wrap: wrap; }
.guide-editorial .qa-list, .guide-editorial .dissent, .guide-editorial .xbox, .guide-editorial .crit-card { border-radius: 8px; }
.guide-editorial details.qa { padding: 18px 20px; }
.guide-editorial details.qa summary { font-size: 15px; line-height: 1.5; }
.guide-editorial details.qa p { font-size: 17px; }
.guide-editorial .src-list li { padding: 4px 0; }
.guide-editorial .grid .card h3 { font-size: 18px; }

@media (max-width: 1100px) and (min-width: 821px) {
  .guide-editorial .pc-body { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1020px) {
  .guide-editorial .g-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-editorial .g-side { display: none; }
}
@media (max-width: 820px) {
  .guide-editorial .topgrid { grid-template-columns: 1fr; }
  .guide-editorial .pc-body { grid-template-columns: 1fr; padding: 18px; }
  .guide-editorial .pc-side { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 16px; }
  .guide-editorial .p-photo { height: 170px; grid-row: span 2; }
  .guide-editorial .pc-side .cbars { grid-column: 2; }
  .guide-editorial .pc-side .pc-rating { grid-column: 1 / -1; }
  .guide-editorial .pc-score { justify-content: flex-start; }
  .guide-editorial .pc-head h3 { font-size: 21px; }
  .guide-editorial .g-sec li.mtable { font-family: var(--sans); }
  .guide-editorial .mtable > li { font-family: var(--sans); line-height: 1.5; padding: 18px; }
  .guide-editorial .m-head { align-items: flex-start; font-size: 14px; }
  .guide-editorial .m-head a { min-width: 0; }
  .guide-editorial .m-facts { gap: 12px; margin-top: 16px; }
  .m-checks { display: grid; gap: 8px; margin: 15px 0; font-size: 12px; }
  .m-checks > span { display: flex; align-items: center; gap: 8px; }
  .guide-editorial .final-card { grid-template-columns: 1fr; }
  .battery-visual { grid-template-columns: 1fr; }
  .battery-feature { padding: 26px; }
  .battery-number { margin-top: 16px; }
  .battery-comparison { padding: 26px; gap: 20px; }
}
@media (max-width: 720px) {
  body:has(.guide-editorial) .nav { gap: 12px; }
  body:has(.guide-editorial) .links { top: 68px; }
  body:has(.guide-editorial) .logo-name { font-size: 21px; }
  body:has(.guide-editorial) .logo-sub { font-size: 8px; }
  .guide-editorial .g-head { padding-top: 20px; }
  .guide-editorial .g-crumbs { margin-bottom: 24px; }
  .guide-editorial .g-head h1 { font-size: 30px; line-height: 1.15; }
  .guide-editorial .g-head .dek { font-size: 17px; }
  .guide-editorial .g-byline { gap: 8px 12px; font-size: 12px; }
  .guide-editorial .g-byline span + span:not(.av)::before { margin-right: 8px; }
  .guide-editorial .g-sec { margin-top: 40px; }
  .guide-editorial .g-sec p { font-size: 17px; }
  .guide-editorial .short, .guide-editorial .win-card { padding: 23px 20px; }
  .guide-editorial .short h2 { font-size: 21px; }
  .guide-editorial .win-img { width: 90px; height: 90px; }
  .guide-editorial .win-name { font-size: 18px; }
  .guide-editorial .statbar dt { font-size: 11px; }
  .guide-editorial .statbar dd { font-size: 23px; }
  .guide-editorial .pc-head { gap: 9px; padding: 15px; }
  .guide-editorial .pc-head h3 { font-size: 19px; flex: 1; min-width: 0; }
  .guide-editorial .pc-side { grid-template-columns: 110px minmax(0, 1fr); }
  .guide-editorial .p-photo { height: 150px; }
  .guide-editorial .pc-side .cbars { grid-column: 1 / -1; }
  .guide-editorial .pc-main > p { font-size: 17px; }
  .battery-label { flex-wrap: wrap; gap: 4px 12px; }
  .battery-label span { flex: 1 1 160px; }
  .guide-editorial .ranklist { font-size: 13px; }
  .guide-editorial .ranklist .rk { width: 16px; flex: none; }
  .guide-editorial .ranklist .mono { font-size: 11px; }
  .guide-editorial .pc-purchase { align-items: flex-start; flex-direction: column; }
  .guide-editorial .pc-purchase .btn { width: 100%; }
  .guide-editorial .final-card { padding: 20px; }
  .guide-editorial .final-card .btn { width: 100%; }
  .guide-editorial .lf li { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:has(.guide-editorial) .btn, body:has(.guide-editorial) .stickybar { transition: none; }
}
@media (max-width: 639px) {
  .guide-editorial .likes { grid-template-columns: minmax(0, 1fr); }
}

/* Fit the packaging mockup to its landscape proportions. */
.guide-editorial .p-photo--landscape { height: auto; aspect-ratio: 3 / 2; overflow: hidden; background: #e7e2dc; }
.guide-editorial .p-photo--landscape img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.guide-editorial .win-img--landscape { width: clamp(112px, 11vw, 150px); height: auto; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: #e7e2dc; }
.guide-editorial .win-img--landscape img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
@media (max-width: 820px) {
  .guide-editorial .pc-side:has(.p-photo--landscape) { grid-template-columns: minmax(0, 1fr); }
  .guide-editorial .pc-side .p-photo--landscape { grid-column: 1 / -1; grid-row: auto; }
  .guide-editorial .pc-side:has(.p-photo--landscape) .cbars { grid-column: 1 / -1; }
}