:root {
  --compare-ink: #12211d;
  --compare-text: #344b44;
  --compare-muted: #687a74;
  --compare-line: #d5e1dc;
  --compare-soft: #f1f7f4;
  --compare-paper: #ffffff;
  --compare-green: #2f7869;
  --compare-green-dark: #205f53;
  --compare-attribute-width: 184px;
  --compare-column-width: 248px;
}

* { box-sizing: border-box; }
html { background: #f7faf8; }
body.compare-page { margin: 0; overflow-x: clip; color: var(--compare-text); background: #f7faf8; letter-spacing: 0; }
.compare-page button { font: inherit; letter-spacing: 0; }
.compare-page .marketplace-public-header { position: sticky; top: 0; z-index: 40; min-height: var(--marketplace-header-height); border-bottom: 1px solid var(--compare-line); background: rgba(255, 255, 255, 0.98); }
.compare-page .mobile-nav-toggle { display: none !important; }
.compare-login { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; border-radius: 8px; padding: 9px 14px; color: #fff; background: var(--compare-green); font-weight: 800; text-decoration: none; }
.compare-login img { filter: brightness(0) invert(1); }

.compare-personal-nav { display: flex; width: min(1380px, calc(100% - 48px)); min-height: 52px; align-items: stretch; gap: 4px; margin: 0 auto; overflow-x: auto; border-bottom: 1px solid var(--compare-line); scrollbar-width: none; }
.compare-personal-nav::-webkit-scrollbar { display: none; }
.compare-personal-nav a { position: relative; display: inline-flex; min-height: 52px; align-items: center; flex: 0 0 auto; padding: 10px 16px; color: var(--compare-muted); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.compare-personal-nav a[aria-current="page"] { color: var(--compare-ink); }
.compare-personal-nav a[aria-current="page"]::after { position: absolute; right: 16px; bottom: -1px; left: 16px; height: 3px; background: var(--compare-green); content: ""; }

.compare-main { width: min(1380px, calc(100% - 48px)); min-width: 0; min-height: 640px; margin: 0 auto; padding: 30px 0 64px; }
.compare-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.compare-heading p { margin: 0 0 5px; color: var(--compare-green-dark); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.compare-heading h1 { margin: 0; color: var(--compare-ink); font-size: 34px; line-height: 1.08; }
.compare-heading span { display: block; margin-top: 8px; color: var(--compare-muted); font-size: 14px; }
.compare-heading .compare-intro { color: var(--compare-text); }
.compare-page .button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid var(--compare-green); border-radius: 8px; padding: 8px 13px; color: var(--compare-green-dark); background: #fff; font-weight: 800; text-decoration: none; }
.compare-page .button.primary { color: #fff; background: var(--compare-green); }
.compare-page .button.primary:hover { background: var(--compare-green-dark); }

.compare-toolbar { display: flex; min-height: 58px; align-items: center; gap: 18px; margin-top: 22px; border-block: 1px solid var(--compare-line); padding: 8px 0; }
.compare-toolbar > p { margin: 0 auto 0 0; color: var(--compare-muted); font-size: 13px; }
.compare-pager { display: flex; min-width: 150px; align-items: center; justify-content: center; gap: 6px; }
.compare-pager button { display: grid; width: 38px; height: 38px; min-height: 38px; place-items: center; border: 1px solid var(--compare-line); border-radius: 50%; padding: 0; color: var(--compare-green-dark); background: #fff; font-weight: 900; cursor: pointer; }
.compare-pager button:disabled { opacity: 0.35; cursor: default; }
.compare-pager strong { min-width: 60px; color: var(--compare-ink); font-size: 12px; text-align: center; }
.compare-clear { min-height: 40px; border: 0; padding: 8px 4px; color: var(--compare-green-dark); background: transparent; font-weight: 800; cursor: pointer; }

.compare-section { margin-top: 16px; }
.compare-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; border: 1px solid var(--compare-line); border-radius: 8px; background: #fff; isolation: isolate; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-color: #91b2a7 #edf3f0; scrollbar-width: thin; touch-action: pan-x pan-y; }
.compare-scroll:focus-visible { outline: 3px solid rgba(47, 120, 105, 0.25); outline-offset: 3px; }
.compare-loading { min-height: 360px; margin: 0; padding: 40px; }
.comparison-matrix { width: max-content; min-width: 100%; }
.compare-page .comparison-matrix-row { display: grid; grid-template-columns: var(--compare-attribute-width) repeat(var(--comparison-columns), var(--compare-column-width)) !important; }
.comparison-matrix.is-balanced { width: 100%; }
.compare-page .comparison-matrix.is-balanced .comparison-matrix-row { grid-template-columns: var(--compare-attribute-width) repeat(var(--comparison-columns), minmax(var(--compare-column-width), 1fr)) !important; }
.comparison-matrix-row > * { min-width: 0; border-right: 1px solid var(--compare-line); border-bottom: 1px solid var(--compare-line); padding: 13px; overflow-wrap: anywhere; background: #fff; font-size: 12px; line-height: 1.4; }
.comparison-matrix-row > :last-child { border-right: 0; }
.comparison-matrix-row:last-child > * { border-bottom: 0; }
.comparison-matrix-row > :first-child { position: sticky; left: 0; z-index: 8; color: var(--compare-ink); background: #f7faf8; box-shadow: 5px 0 9px rgba(19, 49, 41, 0.08); }
.comparison-matrix-row.has-difference > :first-child { color: var(--compare-green-dark); }
.comparison-matrix-row.has-difference > :not(:first-child) { background: #f3f8f5; }
.comparison-matrix-head > * { min-height: 168px; padding: 12px; scroll-snap-align: start; }
.comparison-matrix-head > :first-child { z-index: 12; display: grid; align-content: end; gap: 4px; }
.comparison-matrix-head > :first-child span { font-size: 15px; font-weight: 850; }
.comparison-matrix-head > :first-child small { color: var(--compare-muted); font-size: 10px; }
.compare-person { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 9px; min-height: 142px; padding-right: 24px; }
.compare-photo { display: block; width: 66px; height: 84px; overflow: hidden; border-radius: 6px; background: var(--compare-soft); }
.compare-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.compare-person h2 { margin: 0; color: var(--compare-ink); font-size: 15px; line-height: 1.15; }
.compare-person p { margin: 4px 0 0; color: var(--compare-muted); font-size: 10px; line-height: 1.3; }
.compare-person .wb-comparison-summary { color: var(--compare-ink); font-weight: 750; }
.compare-heart,
.compare-remove { position: absolute; right: -2px; display: grid; width: 28px; height: 28px; min-height: 28px; place-items: center; border-radius: 50%; padding: 0; cursor: pointer; }
.compare-heart { top: 0; border: 1px solid var(--compare-green); background: #fff; }
.compare-heart[aria-pressed="true"],
.compare-heart.is-selected { border-color: var(--compare-green); background: var(--compare-green); }
.compare-heart[aria-pressed="true"] img { filter: brightness(0) invert(1); }
.compare-remove { top: 35px; border: 1px solid var(--compare-line); background: #fff; }
.compare-heart img,
.compare-remove img { width: 15px; height: 15px; }
.compare-person.is-missing { grid-template-columns: 48px minmax(0, 1fr); }
.compare-photo-placeholder { display: grid; width: 48px; height: 60px; place-items: center; border-radius: 6px; color: var(--compare-muted); background: var(--compare-soft); font-size: 22px; font-weight: 800; }
.comparison-matrix-actions > div { display: grid; align-content: start; gap: 7px; min-height: 156px; }
.comparison-matrix-actions .button { width: 100%; min-height: 38px; padding: 7px; font-size: 11px; }
.compare-remove-text { min-height: 36px; border: 0; color: var(--compare-green-dark); background: transparent; font-weight: 800; cursor: pointer; }
.compare-empty { display: grid; min-height: 360px; place-content: center; justify-items: start; padding: 36px; }
.compare-empty h2 { margin: 0; color: var(--compare-ink); font-size: 25px; }
.compare-empty p { max-width: 580px; margin: 8px 0 18px; color: var(--compare-muted); }
.compare-empty > div { display: flex; flex-wrap: wrap; gap: 8px; }

.compare-safety,
.compare-footer { width: min(1380px, calc(100% - 48px)); margin: 0 auto; border-top: 1px solid var(--compare-line); padding: 24px 0; }
.compare-safety { display: flex; justify-content: space-between; gap: 20px; }
.compare-safety a,
.compare-footer a { color: var(--compare-green-dark); }
.compare-footer { display: flex; min-height: 130px; justify-content: space-between; gap: 30px; }
.compare-footer div { display: grid; align-content: start; gap: 8px; }
.compare-footer small { color: var(--compare-muted); }
.compare-footer nav { display: flex; align-content: start; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.compare-footer button { align-self: start; border: 0; padding: 0; color: var(--compare-text); background: transparent; }

@media (max-width: 780px) {
  :root { --compare-attribute-width: 132px; --compare-column-width: 232px; }
  .compare-page .marketplace-primary-nav { width: 100%; margin-inline: 0; padding-inline: 0; }
  .compare-personal-nav,
  .compare-main,
  .compare-safety,
  .compare-footer { width: calc(100% - 24px); }
  .compare-heading { align-items: start; }
  .compare-heading h1 { font-size: 29px; }
  .compare-toolbar { flex-wrap: wrap; gap: 10px; }
  .compare-toolbar > p { width: 100%; }
  .compare-pager { margin-right: auto; }
  .comparison-matrix-row > * { padding: 11px; }
  .comparison-matrix.is-balanced { width: max-content; }
  .compare-page .comparison-matrix.is-balanced .comparison-matrix-row { grid-template-columns: var(--compare-attribute-width) repeat(var(--comparison-columns), var(--compare-column-width)) !important; }
  .comparison-matrix-head > * { min-height: 174px; }
}

@media (max-width: 520px) {
  .compare-page .marketplace-public-header :is(.marketplace-header-tool, .compare-login) { width: 44px; min-height: 44px; }
  .compare-page .site-header .brand { min-height: 44px; white-space: nowrap; font-size: 15px; }
  .compare-page .site-header .brand::before { width: 26px; height: 26px; flex-basis: 26px; }
  .compare-page .marketplace-primary-nav a { min-height: 44px; }
  :root { --compare-attribute-width: 110px; --compare-column-width: 218px; }
  .compare-login span { display: none; }
  .compare-login { width: 44px; padding: 9px; justify-content: center; }
  .compare-main { padding-top: 18px; }
  .compare-heading { display: grid; }
  .compare-heading h1 { font-size: 24px; }
  .compare-heading .button { justify-self: start; }
  .compare-page .button,
  .compare-clear,
  .compare-remove-text { min-height: 44px; }
  .compare-toolbar { display: grid; grid-template-columns: 1fr auto; }
  .compare-toolbar > p { grid-column: 1 / -1; }
  .compare-pager { min-width: 0; margin: 0; justify-content: start; }
  .compare-pager button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; }
  .compare-scroll { scroll-padding-inline-start: var(--compare-attribute-width); }
  .comparison-matrix-row > * { padding: 9px; font-size: 11px; }
  .comparison-matrix-row > :first-child { font-size: 10px; }
  .comparison-matrix-head > * { min-height: 184px; }
  .compare-person { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; min-height: 164px; padding-right: 0; padding-bottom: 50px; }
  .compare-photo { width: 56px; height: 76px; }
  .compare-heart,
  .compare-remove { top: auto; bottom: 0; width: 44px; height: 44px; min-height: 44px; }
  .compare-heart { right: 50px; }
  .compare-remove { right: 0; }
  .compare-person.is-missing { grid-template-columns: 48px minmax(0, 1fr); }
  .comparison-matrix-actions .button { min-height: 44px; }
  .compare-safety,
  .compare-footer { display: grid; }
  .compare-footer nav { justify-content: flex-start; }
}

@media (max-width: 340px) {
  :root { --compare-attribute-width: 100px; --compare-column-width: 210px; }
  .compare-personal-nav,
  .compare-main,
  .compare-safety,
  .compare-footer { width: calc(100% - 16px); }
  .compare-person { grid-template-columns: 54px minmax(0, 1fr); }
  .compare-photo { width: 54px; height: 72px; }
}

.compare-page :is(button, a, input, select):focus-visible {
  outline: 3px solid rgba(47, 120, 105, 0.34);
  outline-offset: 2px;
}