/* The article's typography stays in charge; retailer controls use a compact UI face. */
.cab {
    --cab-accent: #0945c8;
    --cab-background: #fff;
    --cab-text: #12123f;
    --cab-button-text: #fff;
    --cab-line: color-mix(in srgb, var(--cab-text) 18%, var(--cab-background));
    --cab-wash: color-mix(in srgb, var(--cab-accent) 5%, var(--cab-background));
    color: var(--cab-text);
    background: var(--cab-background);
    border: 1px solid var(--cab-line);
    border-top: 4px solid var(--cab-accent);
    border-radius: 4px;
    margin-block: 2rem;
    padding: clamp(1rem, 3vw, 2rem);
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    clear: both;
    container-type: inline-size;
}
.cab *, .cab *::before, .cab *::after { box-sizing: border-box; }
.cab :where(h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; color: inherit; }
.cab :where(h2, h3, h4) { font-family: inherit; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.cab :where(a, summary, [tabindex]):focus-visible { outline: 3px solid var(--cab-text); outline-offset: 4px; }
.cab :where(a) { color: inherit; }
.cab__header { margin-bottom: 1rem; }
.cab .cab__heading { font-size: clamp(1.4rem, 3vw, 1.9rem); text-wrap: balance; }
.cab__intro { margin-top: .65rem; max-width: 70ch; }
.cab__intro p + p, .cab__description p + p { margin-top: .7em; }
.cab .cab__disclosure { margin: 0 0 1.5rem; font-size: .8125rem; line-height: 1.5; max-width: 90ch; }
.cab__products { display: grid; gap: 1.5rem; list-style: none; padding: 0; }
.cab .cab__item { list-style: none; margin: 0; padding: 0; min-width: 0; display: flex; }
.cab__product { display: grid; align-content: start; gap: 1.25rem; min-width: 0; width: 100%; }
.cab__product-heading { position: relative; }
.cab .cab__product-title { font-size: 1.4rem; overflow-wrap: anywhere; }
.cab__badge { display: inline-block; font: 650 .75rem/1.4 system-ui, sans-serif; color: var(--cab-text); background: var(--cab-wash); border: 1px solid var(--cab-line); padding: .3rem .6rem; border-radius: 3px; margin-bottom: .7rem; }
.cab--atmospheric .cab__badge { background: #f9d13e; color: #12123f; border-color: #f9d13e; }
.cab__rank { float: left; min-width: 2rem; padding-right: .7rem; color: var(--cab-text); font: 750 2rem/1.1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cab__media { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 3px; padding: 1rem; min-width: 0; }
.cab .cab__media img { display: block; width: 100%; max-height: 15rem; object-fit: contain; border: 0; margin: 0; }
.cab__editorial { min-width: 0; }
.cab .cab__rating { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .8rem; font: .75rem/1.4 system-ui, sans-serif; }
.cab__rating strong { font-size: 1.2rem; font-weight: 750; }
.cab__rating strong span { font-size: .875rem; font-weight: 400; }
.cab__description { font-size: 1rem; max-width: 70ch; }
.cab .cab__specs { margin-top: 1.1rem; font: .8125rem/1.5 system-ui, sans-serif; }
.cab__specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--cab-line); }
.cab__specs dt { font-weight: 650; }
.cab__specs dd { text-align: right; overflow-wrap: anywhere; }
.cab__tradeoffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.15rem; font-size: .875rem; }
.cab__tradeoffs:empty { display: none; }
.cab__tradeoffs h4 { font: 700 .8125rem/1.4 system-ui, sans-serif; margin-bottom: .4rem; }
.cab__tradeoffs ul { padding-left: 1.1em; list-style: disc; }
.cab__tradeoffs li { padding-left: .1em; margin: .3em 0 0; }
.cab__offers { display: grid; gap: 1rem; }
.cab__offer { min-width: 0; }
.cab__offer + .cab__offer { padding-top: 1rem; border-top: 1px solid var(--cab-line); }
.cab__offer-facts { margin-bottom: .65rem; font-family: system-ui, sans-serif; }
.cab__offer-price { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cab__offer-price strong { font-size: 1.2rem; line-height: 1.3; font-weight: 750; }
.cab__offer-price > span, .cab__used-price { font-size: .75rem; }
.cab__checked { display: block; font-size: .6875rem; line-height: 1.5; margin-top: .3rem; }
.cab__price-details { font-size: .6875rem; line-height: 1.5; margin-top: .3rem; }
.cab__price-details summary { cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.cab__price-details p { margin-top: .4rem; }
.cab .cab__button { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; background: var(--cab-accent); color: var(--cab-button-text); border: 2px solid var(--cab-accent); border-radius: 3px; padding: .7rem 1rem; font: 650 .875rem/1.4 system-ui, sans-serif; text-decoration: none; text-align: center; box-shadow: none; overflow-wrap: anywhere; }
.cab .cab__button:hover { text-decoration: underline; text-underline-offset: .2em; }
.cab .cab__offer + .cab__offer .cab__button { background: var(--cab-background); color: var(--cab-text); border-color: var(--cab-line); }
.cab__retailer-content { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; font: .75rem/1.4 system-ui, sans-serif; text-decoration: underline; text-underline-offset: .15em; }
.cab .cab__retailer-content img { width: 3rem; height: 3rem; object-fit: contain; background: #fff; flex-shrink: 0; margin: 0; }
.cab__retailer-content span { overflow-wrap: anywhere; }
.cab__verdict { margin-top: 1.75rem; border: 1px solid var(--cab-line); background: var(--cab-wash); padding: 1rem 1.25rem; }
.cab__verdict h3 { font-size: 1rem; margin-bottom: .4rem; }
.cab__verdict > div { font-size: .9375rem; max-width: 75ch; }
.cab .cab__amazon-disclaimer { margin-top: 1.25rem; font: .6875rem/1.6 system-ui, sans-serif; max-width: 100ch; }
.cab--roundup .cab__item + .cab__item { border-top: 1px solid var(--cab-line); padding-top: 1.75rem; }
.cab--top3 .cab__products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cab--versus .cab__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.cab--top3 .cab__product, .cab--versus .cab__product { display: flex; flex-direction: column; }
.cab--top3 .cab__purchase, .cab--versus .cab__purchase { margin-top: auto; }
.cab--top3 .cab__tradeoffs { grid-template-columns: 1fr; gap: .75rem; }
.cab--top3 .cab__product-title { font-size: 1.125rem; }
.cab--top3 .cab__rank { font-size: 1.5rem; }
.cab .cab__scroll-hint { font: .75rem/1.5 system-ui, sans-serif; margin-bottom: .6rem; }
.cab__table-scroll { overflow-x: auto; scrollbar-gutter: stable; border: 1px solid var(--cab-line); border-radius: 3px; }
.cab .cab__table { border-collapse: separate; border-spacing: 0; margin: 0; width: 100%; font: .8125rem/1.5 system-ui, sans-serif; color: inherit; background: var(--cab-background); table-layout: auto; border: 0; }
.cab .cab__table :where(th, td) { padding: 1rem; text-align: left; vertical-align: top; border: 0; border-right: 1px solid var(--cab-line); border-bottom: 1px solid var(--cab-line); background: transparent; min-width: 14rem; max-width: 22rem; overflow-wrap: anywhere; }
.cab .cab__table tr > :first-child { min-width: 8rem; max-width: 12rem; position: sticky; left: 0; z-index: 1; background: var(--cab-background); box-shadow: 2px 0 0 var(--cab-line); }
.cab .cab__table thead th { background: var(--cab-wash); }
.cab .cab__table tr > :last-child { border-right: 0; }
.cab .cab__table tbody tr:last-child > * { border-bottom: 0; }
.cab__table-title { display: block; font-size: 1rem; font-weight: 700; }
.cab .cab__table-image { display: block; margin: 0 auto .8rem; width: 100%; height: 7rem; object-fit: contain; background: #fff; }
.cab__table .cab__rating { display: block; }
.cab__table .cab__rating > span { display: block; }
.cab__not-listed { font-style: italic; }
.cab .cab__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@container (min-width: 620px) {
    .cab--single .cab__product, .cab--roundup .cab__product { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
    .cab--single .cab__product-heading, .cab--roundup .cab__product-heading { grid-column: 1 / -1; }
    .cab--single .cab__media, .cab--roundup .cab__media { grid-column: 1; grid-row: 2; align-self: start; }
    .cab--single .cab__editorial, .cab--roundup .cab__editorial { grid-column: 2; grid-row: 2 / span 2; }
    .cab--single .cab__purchase, .cab--roundup .cab__purchase { grid-column: 1; }
    .cab--single .cab__product:not(:has(.cab__media)), .cab--roundup .cab__product:not(:has(.cab__media)) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .cab--single .cab__product:not(:has(.cab__media)) .cab__editorial, .cab--roundup .cab__product:not(:has(.cab__media)) .cab__editorial { grid-column: 1; }
    .cab--single .cab__product:not(:has(.cab__media)) .cab__purchase, .cab--roundup .cab__product:not(:has(.cab__media)) .cab__purchase { grid-column: 2; grid-row: 2; }
}
@container (max-width: 619px) {
    .cab--top3 .cab__products, .cab--versus .cab__products { grid-template-columns: 1fr; gap: 1.5rem; }
    .cab--top3 .cab__item + .cab__item, .cab--versus .cab__product + .cab__product { padding-top: 1.5rem; border-top: 1px solid var(--cab-line); }
    .cab--top3 .cab__product-title { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    .cab { padding: 1rem; margin-block: 1.5rem; }
    .cab__tradeoffs { grid-template-columns: 1fr; gap: .75rem; }
    .cab .cab__table :where(th, td) { min-width: 12rem; padding: .75rem; }
    .cab .cab__table tr > :first-child { min-width: 8rem; max-width: 10rem; }
}
@media print {
    .cab { break-inside: avoid; border: 1px solid #aaa; }
    .cab__table-scroll { overflow: visible; }
    .cab .cab__button { color: #000; background: transparent; border-color: #777; }
    .cab__scroll-hint { display: none; }
}

.cab--atmospheric :where(h2, h3) { font-family: var(--wp--preset--font-family--heading, inherit); }
