body:has(.compare-directory) { background: #fff; }
#wrapper.compare-directory { padding: 30px 0 48px; }
.compare-directory .phone-compare-page { margin: 0; padding: 0; border: 0; background: #fff; box-shadow: none; }
.compare-directory .phone-section-top { align-items: center; margin-bottom: 21px; padding: 0; }
.compare-directory .phone-section-top > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 15px; }
.compare-directory .phone-section-top h1 { color: #2b3d55; font-size: 20px; font-weight: 600; line-height: 1.5; }
.compare-directory .phone-section-top p { margin: 0; color: #a0a9b5; font-size: 11px; }
.compare-directory .phone-section-top > a { color: #8e9aaa; font-size: 12px; }
.compare-directory .phone-section-top > a:hover { color: #ff5000; }
.compare-directory .compare-toolbar { gap: 16px; padding: 13px 16px; border: 1px solid #e8ebef; border-radius: 3px; background: #fff; }
.compare-directory .compare-filter-options { align-items: center; gap: 20px; }
.compare-directory .compare-filter-options label { gap: 6px; color: #7c899b; font-size: 12px; }
.compare-directory input[type="checkbox"] { width: 12px; height: 12px; accent-color: #ff5000; }
.compare-directory .compare-tools { gap: 18px; }
.compare-directory .compare-tools button { color: #9aa4b2; font-size: 12px; }
.compare-directory .compare-tools #compare-add { height: 29px; padding: 0 12px; border: 0; border-radius: 3px; background: rgb(255 80 0 / 85%); color: #fff; font-size: 12px; }
.compare-directory .compare-tools #compare-add:hover { background: #ff5000; }
.compare-directory .compare-advanced summary { display: flex; align-items: center; gap: 5px; color: #929baa; font-size: 12px; list-style: none; }
.compare-directory .compare-advanced summary::-webkit-details-marker { display: none; }
.compare-directory .compare-advanced summary::after { content: ""; display: block; width: 12px; height: 12px; background: url("../images/device-chevron-down.svg") center / contain no-repeat; }
.compare-directory .compare-advanced[open] summary::after { transform: rotate(180deg); }
.compare-directory .compare-advanced > div { border-color: #e8ebef; border-radius: 4px; box-shadow: 0 5px 18px #23364f12; }
.compare-directory .phone-compare-note { margin: 12px 0 20px; color: #a0a9b5; font-size: 11px; }
.compare-directory .phone-compare-message { color: #8996a7; font-size: 12px; }
.compare-directory .compare-scroll { border-color: #e8ebef; border-radius: 3px; }
.compare-directory #phone-compare-table th, .compare-directory #phone-compare-table td { border-color: #edf0f3; color: #66758a; }
.compare-directory #phone-compare-table .compare-group th { background: #f7f8fa; }
.compare-directory #phone-compare-table .compare-best { background: #fff5ee; color: #e57540; }
.compare-directory .compare-product h2 { color: #36475c; }
.compare-directory .compare-model-replace { border-color: #e7ebef; background: #fff; color: #8390a1; }
.compare-directory .phone-source-note { color: #a0a9b5; font-size: 11px; }
@media (max-width: 640px) {
  #wrapper.compare-directory { padding-top: 20px; }
  .compare-directory .phone-section-top { gap: 12px; }
  .compare-directory .phone-section-top > div { gap: 5px; }
  .compare-directory .phone-section-top h1 { font-size: 18px; }
  .compare-directory .compare-toolbar { padding: 12px; }
  .compare-directory .compare-filter-options { gap: 12px; }
}

/* Comparison controls follow the navigation accent. */
.compare-directory .compare-filter-options { gap: 10px; }
.compare-directory .compare-filter-options > label,
.compare-directory .compare-advanced summary { box-sizing: border-box; min-height: 34px; padding: 6px 11px; border: 1px solid #e6eaf0; border-radius: 5px; background: #fff; color: #66758a; font-size: 13px; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.compare-directory .compare-filter-options > label:hover,
.compare-directory .compare-advanced summary:hover { border-color: #ffb899; color: var(--site-primary, #ff5000); background: #fff8f4; }
.compare-directory .compare-filter-options > label:has(input:checked),
.compare-directory .compare-advanced[open] summary { border-color: #ffccb5; background: #fff3ec; color: var(--site-primary, #ff5000); }
.compare-directory input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: 0 0 15px; width: 15px; height: 15px; margin: 0; border: 1px solid #c8d0da; border-radius: 3px; background: #fff; cursor: pointer; vertical-align: middle; transition: background-color .18s ease, border-color .18s ease; }
.compare-directory input[type="checkbox"]:hover { border-color: var(--site-primary, #ff5000); }
.compare-directory input[type="checkbox"]:checked { border-color: var(--site-primary, #ff5000); background: var(--site-primary, #ff5000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.compare-directory input[type="checkbox"]:focus-visible,
.compare-directory summary:focus-visible,
.compare-directory .compare-group-toggle:focus-visible,
.compare-directory .compare-model-replace:focus-visible { outline: 2px solid #ff9c70; outline-offset: 3px; }
.compare-directory .compare-advanced summary::after { margin-left: 4px; transition: transform .2s ease; }
.compare-directory .compare-advanced > div { top: calc(100% + 9px); width: 248px; padding: 12px; border: 1px solid #e8ebef; border-radius: 7px; box-shadow: 0 8px 28px #23364f18; }
.compare-directory .compare-advanced > div label { min-height: 34px; box-sizing: border-box; padding: 7px 8px; gap: 8px; border-radius: 4px; font-size: 13px; }
.compare-directory .compare-advanced > div label:hover { color: var(--site-primary, #ff5000); background: #fff5ee; }
.compare-directory .compare-advanced label + label { margin-top: 3px; }
.compare-directory .compare-advanced p { margin: 9px 8px 2px; font-size: 12px; }
.compare-directory .compare-chevron, .compare-directory .compare-product .compare-chevron { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; transition: transform .2s ease; }
.compare-directory .compare-model-replace { display: inline-flex; align-items: center; gap: 5px; }
.compare-directory .compare-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; font-weight: 600; text-align: left; }
.compare-directory .compare-group-toggle:hover { color: var(--site-primary, #ff5000); }
.compare-directory .compare-group-toggle[aria-expanded="false"] .compare-chevron { transform: rotate(-90deg); }
.compare-directory .compare-row-label { align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .compare-directory input[type="checkbox"], .compare-directory .compare-filter-options > label,
  .compare-directory .compare-advanced summary, .compare-directory .compare-advanced summary::after,
  .compare-directory .compare-chevron { transition: none; }
}

.compare-directory .compare-picker { scrollbar-width: none; -ms-overflow-style: none; }
.compare-directory .compare-picker::-webkit-scrollbar { display: none; width: 0; height: 0; }
.compare-directory .compare-floating-header { position: fixed; top: 0; z-index: 90; box-sizing: border-box; border: 1px solid #e8ebef; background: #fff; box-shadow: 0 4px 16px #23364f14; }
.compare-directory .compare-floating-header[hidden] { display: none; }
.compare-directory .compare-floating-viewport { overflow: hidden; }
.compare-directory .compare-floating-table { table-layout: fixed; border-collapse: collapse; margin: 0; }
.compare-directory .compare-floating-table th { box-sizing: border-box; height: 102px; padding: 10px 16px; border-right: 1px solid #edf0f3; background: #fff; color: #66758a; font-size: 13px; font-weight: 400; text-align: center; vertical-align: middle; }
.compare-directory .compare-floating-table th:first-child { position: sticky; left: 0; z-index: 2; background: #fafbfd; text-align: left; }
.compare-directory .compare-floating-table .compare-product { position: relative; }
.compare-directory .compare-floating-table .compare-product > img { float: left; width: 56px; height: 72px; margin: 0 9px 0 0; object-fit: contain; }
.compare-directory .compare-floating-table h2 { margin: 4px 12px 7px 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.compare-directory .compare-floating-table .phone-edition,
.compare-directory .compare-floating-table .compare-source-link { display: none; }
.compare-directory .compare-floating-table .compare-product-actions { gap: 0; }
.compare-directory .compare-floating-table .compare-remove { position: absolute; top: 4px; right: 4px; }
.compare-directory .compare-floating-table .compare-model-replace { font-size: 12px; }
@media (max-width: 640px) {
  .compare-directory .compare-floating-table th { padding: 8px 10px; }
  .compare-directory .compare-floating-table .compare-product > img { width: 42px; height: 64px; }
}
@media (max-width: 768px) {
  .compare-directory .phone-compare-page { --compare-label-width: 96px; }
  .compare-directory .phone-compare-page #phone-compare-table thead th:first-child,
  .compare-directory .phone-compare-page #phone-compare-table tbody tr:not(.compare-group) th:first-child { width: var(--compare-label-width); }
  .compare-directory .phone-compare-page #phone-compare-table .compare-group th { padding: 9px 12px; }
  .compare-directory #phone-compare-table .compare-group .compare-group-toggle { position: sticky; left: 12px; width: calc(var(--compare-label-width) - 24px); gap: 4px; font-size: 11px; white-space: nowrap; }
  .compare-directory #phone-compare-table .compare-group .compare-chevron { flex-basis: 10px; width: 10px; height: 10px; }
}