@layer components {
  .compare-tray {
    position: fixed;
    inset-inline: 0;
    z-index: var(--z-drawer);
    background-color: var(--surface);
    translate: 0 0;
    transition: translate var(--dur-base) var(--ease);
  }

  @starting-style {
    .compare-tray:not([hidden]) { translate: 0 100%; }
  }

  .compare-tray__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding-block: var(--s-4);
  }

  .compare-tray__items {
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compare-tray__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
    border: 1px solid var(--line);
  }

  .compare-tray__img {
    flex: none;
    inline-size: var(--s-10);
    block-size: var(--s-10);
    object-fit: cover;
    border-radius: var(--r-sm);
  }

  .compare-tray__name {
    font-size: var(--fs-small);
    font-weight: var(--fw-ui);
    max-inline-size: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compare-tray__remove {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--field-h);
    block-size: var(--field-h);
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink-500);
    cursor: pointer;
  }
  .compare-tray__remove:hover { color: var(--ink-900); }

  .compare-tray__count { font-size: var(--fs-small); font-weight: var(--fw-ui); }
  .compare-tray__limit { color: var(--ink-500); font-weight: var(--fw-body); }

  html.has-compare-tray {
    padding-block-end: var(--compare-tray-space, var(--s-14));
  }
  html.has-compare-tray .product-cta-bar { display: none; }
  html.has-compare-tray .floating-cta {
    inset-block-end: calc(var(--compare-tray-space, var(--s-14)) + var(--s-5));
  }
  .compare-view {
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: 100%;
    block-size: 100%;
  }

  .compare-view::backdrop {
    background-color: color-mix(in srgb, var(--ink-900) 55%, transparent);
    transition: background-color var(--dur-base) var(--ease);
  }
  .compare-view[open] {
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease);
  }

  @starting-style {
    .compare-view[open]::backdrop { background-color: transparent; }
  }

  @starting-style {
    .compare-view[open] { opacity: 0; }
  }

  .compare-view__panel {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--surface);
  }

  .compare-view__head {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5);
    border-block-end: 1px solid var(--line);
  }

  .compare-view__close {
    display: grid;
    place-items: center;
    inline-size: var(--s-10);
    block-size: var(--s-10);
    background: none;
    border: 0;
    color: var(--ink-700);
    cursor: pointer;
  }
  .compare-view__close:hover { color: var(--ink-900); }

  .compare-view__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: var(--s-5);
  }

  .compare-view__empty {
    color: var(--ink-500);
    font-size: var(--fs-small);
  }

  .compare-table-wrap { overflow-x: auto; }

  .compare-table {
    border-collapse: collapse;
    min-inline-size: 100%;
  }

  .compare-table th,
  .compare-table td {
    vertical-align: top;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    font-size: var(--fs-small);
  }

  .compare-table thead th:not(.compare-table__label) {
    min-inline-size: 12rem;
  }
  .compare-table__label {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--z-raised);
    min-inline-size: 5.5rem;
    font-weight: var(--fw-subhead);
    text-align: start;
  }

  .compare-table tbody tr:nth-child(even) td,
  .compare-table tbody tr:nth-child(even) .compare-table__label {
    background-color: var(--bg-tint);
  }

  .compare-table__product { position: relative; }
  .compare-table__remove {
    position: absolute;
    inset-block-start: var(--s-2);
    inset-inline-end: var(--s-2);
    display: grid;
    place-items: center;
    inline-size: var(--field-h);
    block-size: var(--field-h);
    padding: 0;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    color: var(--ink-700);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .compare-table__remove:hover {
    color: var(--ink-900);
    border-color: var(--ink-500);
  }

  .compare-table__media { display: block; }

  .compare-table__photo {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-sm);
  }

  .compare-table__name {
    display: block;
    margin-block-start: var(--s-3);
    font-weight: var(--fw-subhead);
    color: var(--ink-900);
    text-decoration: none;
  }
  .compare-table__name:hover { text-decoration: underline; }

  .compare-table__price {
    margin-block-start: var(--s-2);
    font-weight: var(--fw-display);
    color: var(--ink-900);
  }
  .compare-view__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s-4) var(--s-5);
    border-block-start: 1px solid var(--line);
  }

  .compare-view__foot-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-ui);
    color: var(--ink-700);
  }

  @media (min-width: 1024px) {
    .compare-table {
      table-layout: fixed;
      inline-size: 100%;
    }
  }

  @media (min-width: 1024px) {
    .compare-table thead th:not(.compare-table__label) {
      min-inline-size: 0;
    }
  }
}

/* Compare modal stacking correction.
 * Product-column controls belong to the horizontally scrolling table content.
 * Keep them below the sticky row-label column so they cannot paint over it
 * while the comparison table is scrolled sideways on narrow viewports.
 */

.compare-table__remove {
  z-index: var(--z-base);
}

/* Product-card Compare is always icon + label. */

.product-card__compare .pinnacle-icon {
  display: block;
  flex: none;
}

/* Comparison tray.
 * The ruled frame is a child of the horizontal scroller. This keeps the frame
 * visually complete while any narrow-screen scrollbar lives below it instead
 * of cutting through the grid. The tray itself sits slightly above the
 * viewport edge so its elevation can read on both sides.
 */

.compare-tray {
  inset-block-end: calc(var(--s-2) + var(--focus-offset));
  padding-block: 0;
  border-block-start: 0;
  border-block-end: 0;
  box-shadow:
    var(--shadow-md),
    0 calc(var(--s-3) * -1) var(--s-7) calc(var(--s-3) * -1) color-mix(in srgb, var(--ink-900) 30%, transparent);
}

.compare-tray__inner {
  display: block;
  inline-size: calc(100% - (var(--gutter-x) * 2));
  max-inline-size: calc(var(--w-max) - (var(--gutter-x) * 2));
  padding: 0;
  padding-block-end: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 0;
}

.compare-tray__frame {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  inline-size: max-content;
  min-inline-size: 100%;
  background-color: var(--surface);
  border: 1px solid var(--ink-900);
}

.compare-tray__selection {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  min-inline-size: max-content;
}

.compare-tray__eyebrow {
  grid-column: auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline: var(--s-4);
  border-inline-end: 1px solid var(--ink-500);
  font-size: var(--fs-micro);
  font-weight: var(--fw-subhead);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.compare-tray__items {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  min-inline-size: max-content;
  padding-inline-start: var(--s-4);
  overflow: visible;
}

.compare-tray__item {
  align-self: stretch;
  min-block-size: 100%;
  max-inline-size: none;
  padding: var(--s-3);
  background-color: var(--surface);
  border-block: 0;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--ink-500);
  border-radius: 0;
}

.compare-tray__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  margin: 0;
  padding-inline: var(--s-4);
  background-color: var(--surface);
  border-inline-start: 1px solid var(--ink-500);
  border-radius: 0;
  color: var(--ink-900);
  white-space: nowrap;
}

.compare-tray__actions {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

.compare-tray__actions > * {
  align-self: stretch;
  border-radius: 0;
}

.compare-tray__add,
.compare-view__whatsapp,
.compare-picker__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.compare-tray__add {
  align-self: stretch;
  flex: none;
  padding-inline: var(--s-4);
  border: 0;
  border-inline-start: 1px solid var(--ink-500);
  border-radius: 0;
  white-space: nowrap;
}

.compare-tray__add:disabled {
  background-color: var(--bg-tint);
  border-color: var(--line);
  color: var(--ink-500);
  cursor: default;
  opacity: 0.6;
  translate: none;
}

.compare-tray__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--s-4);
  background: none;
  border: 0;
  border-inline-start: 1px solid var(--ink-500);
  color: var(--ink-500);
  font: inherit;
  font-size: var(--fs-small);
  text-decoration: underline;
  cursor: pointer;
}

.compare-tray__clear:hover {
  color: var(--ink-900);
}

.compare-tray__compare {
  min-inline-size: var(--s-12);
  padding-inline: var(--s-4);
  border-inline-start: 1px solid var(--ink-500);
  border-radius: 0;
}

.compare-view__head {
  align-items: flex-start;
  padding-block: var(--s-6);
  background-color: var(--bg-tint);
  border-block-end-color: var(--ink-900);
}

.compare-view__heading {
  display: grid;
  gap: var(--s-1);
}

.compare-view__eyebrow {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-subhead);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-500);
}

.compare-view__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  color: var(--ink-900);
}

.compare-view__summary {
  display: flex;
  gap: var(--s-1);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.compare-view__summary [data-compare-count] {
  font-weight: var(--fw-subhead);
  color: var(--ink-900);
}

.compare-view__body {
  display: grid;
  align-content: start;
  gap: var(--s-8);
}

.compare-picker {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background-color: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.compare-picker__head {
  display: grid;
  gap: var(--s-1);
}

.compare-picker__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-subhead);
  color: var(--ink-900);
}

.compare-picker__note,
.compare-picker__status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.compare-picker__search {
  inline-size: 100%;
  block-size: var(--field-h);
  padding-inline: var(--s-4);
  background-color: var(--surface);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-sm);
  color: var(--ink-900);
}

.compare-picker__search:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.compare-picker__results {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-picker__result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
  padding: var(--s-2);
  background-color: var(--surface);
  border: 1px solid var(--line);
}

.compare-picker__thumb {
  inline-size: var(--s-12);
  block-size: var(--s-12);
  object-fit: cover;
  border-radius: var(--r-sm);
}

.compare-picker__details {
  min-inline-size: 0;
}

.compare-picker__name {
  display: block;
  overflow: hidden;
  color: var(--ink-900);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui);
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.compare-picker__name:hover {
  text-decoration: underline;
}

.compare-picker__add {
  flex: none;
  white-space: nowrap;
}

.compare-view__results {
  display: grid;
  gap: var(--s-4);
  min-inline-size: 0;
}

.compare-view__results-head {
  display: grid;
  gap: var(--s-1);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--ink-900);
}

.compare-view__results-head h3,
.compare-view__results-head p,
.compare-view__foot-title,
.compare-view__foot-note {
  margin: 0;
}

.compare-view__results-head h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-subhead);
  color: var(--ink-900);
}

.compare-view__results-head p {
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.compare-table thead th:not(.compare-table__label) {
  background-color: var(--surface);
  border-block-start-color: var(--ink-900);
}

.compare-table__label {
  background-color: var(--bg-alt);
  color: var(--ink-700);
}

.compare-table tbody tr:nth-child(even) .compare-table__label {
  background-color: var(--bg-alt);
}

.compare-table__name {
  font-size: var(--fs-h3);
}

.compare-view__foot {
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  background-color: var(--bg-alt);
  border-block-start-color: var(--ink-900);
}

.compare-view__foot-copy {
  display: grid;
  gap: var(--s-1);
  min-inline-size: 0;
}

.compare-view__foot-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-subhead);
  color: var(--ink-900);
}

.compare-view__foot-note {
  max-inline-size: 52ch;
  font-size: var(--fs-small);
  color: var(--ink-700);
}

.compare-view__whatsapp {
  flex: none;
  text-align: center;
}

.compare-view__whatsapp > span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  flex: none;
}

.compare-view__whatsapp svg {
  display: block;
}

/* The comparison is one large decision surface, so its contents must arrive
 * together. The global motion layer previously animated the panel and then
 * staggered every table cell, which made the table feel loose and caused the
 * content to visually catch up after the dialog was already open. Keep the
 * top-layer dialog/backdrop fade, but hold the panel and table geometry still.
 */

#compare-view .compare-view__panel {
  opacity: 1;
  translate: none;
  scale: 1;
  transform: none;
  transition: none;
}

#compare-view:not([open]) .compare-view__panel {
  opacity: 1;
  translate: none;
  scale: 1;
}

[data-compare-table].is-motion-compare-content .compare-table__product,
[data-compare-table].is-motion-compare-content .compare-cell,
[data-compare-table].is-motion-compare-content .compare-table__label {
  animation: none;
}

@media (min-width: 768px) {
  .compare-picker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  .compare-picker__status,
  .compare-picker__results {
    grid-column: 1 / -1;
  }
}

/* Desktop can allow the selected-products region to flex into spare width.
 * The visual treatment itself is identical to mobile; only sizing changes.
 */

@media (min-width: 1024px) {
  .compare-tray__selection {
    grid-template-columns: auto minmax(0, 1fr) auto;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .compare-tray__items {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
}