/* COMPARISONS */

.comparison.index {

  .comparison-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    padding-bottom: 24px;
  }

  .comparison-tally {
    font-size: var(--font-size-4);
    line-height: 1.25;
    color: var(--color-black);
  }

  .comparison-tools {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* button_to wraps its tool in a form, whose line box would otherwise lift
     the button off the row's baseline. */
  .comparison-tools > * {
    display: flex;
    align-items: center;
  }

  .comparison-tool {
    display: inline-flex;
    align-items: center;
    /* Small because each icon carries its own padding inside a 24-unit
       viewBox; 8px here reads as half again as wide. */
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-4);
    line-height: 1.25;
    color: var(--color-black);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motion-duration-standard) var(--motion-ease-standard);

    /* Maharam Neue sits low in its line box, so a centred glyph reads as
       dropped against the text beside it. */
    .icon {
      flex: none;
      transform: translateY(-2px);
      transition: stroke var(--motion-duration-standard) var(--motion-ease-standard);
    }

    &:hover {
      color: var(--color-text-primary-hover);
    }

    &:hover .icon {
      stroke: var(--color-text-primary-hover);
    }
  }

  /* Sticks below the site header, which is fixed at the top of the viewport,
     and hides its own scrollbar — the rows below carry the only one, and the
     controller mirrors their position here. */
  .comparison-header {
    position: sticky;
    top: var(--layout-header-height);
    z-index: var(--z-1);
    overflow-x: hidden;
    border-bottom: 1px solid var(--color-gray-4);
    background-color: var(--color-white);
  }

  .comparison-scroller {
    overflow-x: auto;
    padding-bottom: 16px;
  }

  /* Laps the first row's rule onto the heading's own, so the two read as one
     line while the table sits unscrolled. */
  .comparison-scroller .comparison-grid {
    margin-top: -1px;
  }

  .comparison-grid {
    --comparison-gutter: 24px;

    display: grid;
    /* Fixed column width rather than 1fr: a two-product comparison should
       read as two cards, not two half-page images. The trailing track takes
       up the slack so every row's rule reaches the far edge; the gutter is
       cell padding rather than a grid gap, which would break the rules. */
    grid-template-columns: repeat(var(--comparison-columns), 260px) minmax(0, 1fr);
    min-width: 100%;
    justify-content: start;
  }

  .comparison-cell {
    padding: 32px var(--comparison-gutter) 32px 0;
    border-top: 1px solid var(--color-gray-4);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-black);
  }

  .comparison-product {
    position: relative;
    padding-top: 0;
    padding-bottom: 24px;
    border-top: 0;
  }

  .comparison-image {
    aspect-ratio: 1;
    background-color: var(--color-gray-2);
    background-position: center;
    background-size: cover;
  }

  .comparison-caption {
    padding-top: 12px;
    transition: color var(--motion-duration-standard) var(--motion-ease-standard);
  }

  .comparison-product-link:hover .comparison-caption {
    color: var(--color-text-primary-hover);
  }

  .comparison-caption p {
    font-size: 14px;
    line-height: 1.45;
    color: inherit;
  }

  .comparison-caption .product-name,
  .comparison-caption .product-color {
    font-weight: 700;
    line-height: 1.35;
  }

  /* Fades in over the swatch on hover, the way the tools on a product card
     do — a permanent chip on every image reads as part of the photograph. */
  .comparison-remove {
    position: absolute;
    top: 12px;
    right: calc(var(--comparison-gutter) + 12px);
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    stroke: var(--color-gray-15);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--motion-duration-standard) var(--motion-ease-standard);

    &:hover {
      stroke: var(--color-black);
    }
  }

  /* focus-visible carries the reveal for the keyboard, which never hovers. */
  .comparison-product:hover .comparison-remove,
  .comparison-remove:focus-visible {
    opacity: 1;
  }

  .comparison-remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .comparison-label {
    font-weight: 700;
  }

  /* One empty swatch the width of a column, standing in for the first
     product the visitor has yet to pick. */
  .comparison-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    max-width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-gray-2);
    transition: background-color var(--motion-duration-standard) var(--motion-ease-standard);

    &:hover {
      background-color: var(--color-gray-3);
    }

    .icon {
      width: 24px;
      height: 24px;
    }
  }

}

/* The tally beside Comparisons in the header nav. */
.nav-count {
  margin-left: 6px;
  /* Its own baseline sits below the label's, which drops the circle off the
     text's optical centre. */
  transform: translateY(-2px);
}

/* Nothing to show at zero, but the span still renders — the toggle's turbo
   stream replaces it by id. */
.nav-count:empty {
  display: none;
}