/* The comparison has one scroll owner. Never inherit the product modal geometry. */
html:has(#comparisonDialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.comparison-modal {
  --muted: #5c6c75;
  width: min(1440px, calc(100% - 40px));
  height: calc(100dvh - 48px);
  max-height: 1100px;
  max-width: none;
  margin: auto;
  padding: 24px;
  border: 1px solid var(--teal-200, #b9e2e7);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  box-shadow: 0 24px 90px #082a3440;
}
.comparison-modal::backdrop { background: #0c293366; backdrop-filter: blur(5px); }
.comparison-modal[open] { display: flex; }
.comparison-modal.is-fallback-open { position: fixed; inset: 0; z-index: 110; }
.comparison-modal__close { position:absolute;inset-inline-end:20px;top:18px;z-index:5; }
.comparison-sheet { display: flex; flex-direction: column; gap: 16px; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.comparison-sheet__head { flex: none; padding-inline-end: 52px; }
.comparison-sheet__eyebrow { color: var(--teal-700); font-size: var(--text-caption, .8125rem); font-weight: 800; }
.comparison-sheet__head h2 { margin: 3px 0 6px; font-size: clamp(23px, 2vw, 30px); line-height: 1.25; letter-spacing: -.5px; }
.comparison-sheet__head p { margin: 0; color: var(--muted); font-size: var(--text-body, 1rem); line-height: 1.5; }
.comparison-sheet__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; flex: none; }
.comparison-sheet__filter { display: flex; align-items: center; gap: 10px; font-size: var(--text-small, .875rem); font-weight: 700; }
.comparison-sheet select { min-height: 40px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: var(--text-small, .875rem); }
.comparison-sheet__filter select { width: 190px; }
.comparison-sheet__differences { display: flex; align-items: center; gap: 8px; font-size: var(--text-small, .875rem); cursor: pointer; }
.comparison-sheet__differences input { width: 18px; height: 18px; accent-color: var(--teal-700); }
.comparison-sheet__hint { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.comparison-sheet__scroll {
  flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  overscroll-behavior: contain; scroll-padding-block: 205px 16px;
  scrollbar-width: thin; scrollbar-color: #7fc8d1 #f4f9fa;
}
.comparison-sheet__scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.comparison-sheet__scroll::-webkit-scrollbar-track { background: #f4f9fa; border-radius: 12px; margin: 12px; }
.comparison-sheet__scroll::-webkit-scrollbar-thumb { border: 2px solid #f4f9fa; border-radius: 10px; background: #7fc8d1; }
.comparison-sheet__table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--text-body, 1rem); line-height: 1.55; }
.comparison-sheet__table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.comparison-sheet__table[data-columns="3"] { min-width: 1050px; }
.comparison-sheet__table th, .comparison-sheet__table td { padding: 16px 18px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); border-inline-end: 1px solid #edf3f4; overflow-wrap: anywhere; }
/* Anchor each column to the shared action baseline even when names wrap. */
.comparison-sheet__table thead th { position: sticky; top: 0; z-index: 3; background: #f1f9fa; box-shadow: 0 1px 0 var(--line); vertical-align: bottom; }
.comparison-sheet__table .comparison-sheet__corner { width: 196px; inset-inline-start: 0; z-index: 4; color: var(--teal-800); vertical-align: middle; }
.comparison-sheet__table .comparison-sheet__criterion { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; }
.comparison-sheet__criterion small { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-caption, .8125rem); font-weight: 400; line-height: 1.5; }
.comparison-sheet__product { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.comparison-sheet__product img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.comparison-sheet__product strong { flex: 1; font-size: 17px; line-height: 1.35; }
.comparison-sheet__remove { align-self:flex-start; }
.comparison-sheet__choose { display:block; width:100%; margin-top:9px; min-height:40px; padding:8px 10px; border:1px solid var(--teal-700); border-radius:10px; background:var(--teal-700); color:#fff; font:inherit; font-size:.85rem; font-weight:700; }
.comparison-sheet .comparison-sheet__edition { width: 100%; min-height: 42px; margin-top: 9px; }
.comparison-sheet__plan { display: flex; align-items: center; min-height: 42px; margin-top: 9px; color: var(--muted); font-size: var(--text-caption, .8125rem); font-weight: 500; }
.comparison-sheet__group th { background: #edf7f8; color: var(--teal-800); font-size: var(--text-body, 1rem); letter-spacing: .1px; }
.comparison-sheet__table .comparison-sheet__group th { padding-block: 10px; }
.comparison-sheet__fact p { margin: 6px 0 0; }
.comparison-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-caption, .8125rem); font-weight: 700; color: #526371; }
.comparison-status b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #eef2f4; font-size: var(--text-body, 1rem); }
.comparison-status--included { color: #146994; }
.comparison-status--included b { background: #e6f4ff; color: #1475a6; }
.comparison-status--limited { color: #755e1c; }
.comparison-status--limited b { background: #fff5d8; }
.comparison-status--setup { color: #526391; }
.comparison-status--setup b { background: #eef0fb; }
.comparison-status--extra { color: #89602d; }
.comparison-status--extra b { background: #fff1df; }
.comparison-status--no { color: #76585e; }
.comparison-status--no b { background: #f8eef0; }
.comparison-sheet__source { margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 400; }
.comparison-sheet__source summary { width: fit-content; cursor: pointer; color: var(--teal-700); }
.comparison-sheet__source>div { margin-top: 8px; padding: 10px; border-radius: 9px; background: #f5f9fa; }
.comparison-sheet__source a, .comparison-sheet__method a { color: var(--teal-800); text-decoration: underline; text-underline-offset: 3px; }
.comparison-sheet__source small { display: block; margin-top: 4px; font-size: inherit; }
.comparison-sheet__source p { margin: 5px 0; }
.comparison-sheet__price { display: flex; flex-direction: column; align-items: start; gap: 5px; font-size: var(--text-small, .875rem); }
.comparison-sheet__price strong { color: var(--teal-800); font-size: 20px; }
.comparison-sheet__price small { font-size: var(--text-caption, .8125rem); color: var(--muted); }
.comparison-sheet__warning { padding: 7px 9px; border-radius: 8px; background: #fff7e6; color: #785c1c; font-size: var(--text-caption, .8125rem); }
.comparison-sheet__method { margin: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfb; color: var(--muted); font-size: var(--text-small, .875rem); line-height: 1.7; }
.comparison-sheet__method summary { color: var(--teal-800); font-weight: 700; cursor: pointer; }
.comparison-sheet__method p { margin-top: 10px; }
.comparison-sheet__empty { padding: 28px; color: var(--muted); }
.comparison-sheet__footer { display: flex; justify-content: space-between; flex: none; gap: 10px; font-size: 13px; color: var(--muted); }
.comparison-sheet__horizontal-hint { display: none; }
.comparison-sheet :focus-visible, .comparison-modal__close:focus-visible { outline: 3px solid #168ca3; outline-offset: 2px; }
.comparison-sheet__scroll:focus-visible { outline-offset: -3px; }
@media (max-width: 700px) {
  .comparison-modal { width: calc(100% - 16px); height: calc(100dvh - 20px); padding: 16px 12px 12px; border-radius: 20px; }
  .comparison-modal__close { inset-inline-end: 12px; top: 12px; }
  .comparison-sheet { gap: 12px; }
  .comparison-sheet__head h2 { font-size: 23px; }
  .comparison-sheet__head p { font-size: var(--text-caption, .8125rem); }
  .comparison-sheet__toolbar { gap: 9px 16px; }
  .comparison-sheet__filter { gap: 7px; font-size: var(--text-caption, .8125rem); }
  .comparison-sheet__filter select { width: 146px; }
  .comparison-sheet__differences { font-size: var(--text-caption, .8125rem); }
  .comparison-sheet__hint { margin: 0; width: 100%; font-size: 12px; }
  /* At phone width, one entire product must fit next to the sticky criterion.
     A desktop-sized column would remain clipped at every horizontal position. */
  .comparison-sheet__scroll { container-type: inline-size; }
  .comparison-sheet__table .comparison-sheet__corner { width: 124px; }
  .comparison-sheet__table th, .comparison-sheet__table td { padding: 12px; }
  .comparison-sheet__table { width: calc(124px + 2 * (100cqi - 124px)); min-width: 0; }
  .comparison-sheet__table[data-columns="3"] { width: calc(124px + 3 * (100cqi - 124px)); min-width: 0; }
  .comparison-sheet__criterion small { font-size: 13px; }
  .comparison-sheet__footer { font-size: 12px; }
  .comparison-sheet__vertical-hint { display: none; }
  .comparison-sheet__horizontal-hint { display: inline; }
}