/**
 * Ritual Market — compare page (side-by-side table)
 */

.rm-page--compare .rm-container {
  overflow: visible;
}

.rm-saved[data-storage="rm_compare"] .rm-icon-btn[data-compare],
.rm-page--compare .rm-card .rm-icon-btn[data-compare] {
  display: none !important;
}

.rm-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0 -4px;
  padding: 0;
  border: 1px solid var(--rm-mint);
  border-radius: 12px;
  box-shadow: var(--rm-shadow);
  background: #fff;
}

.rm-compare {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.rm-compare__label,
.rm-compare__cell {
  border-bottom: 1px solid var(--rm-border);
  border-right: 1px solid var(--rm-border);
  vertical-align: middle;
  padding: 14px 16px;
}

.rm-compare tr:last-child .rm-compare__label,
.rm-compare tr:last-child .rm-compare__cell {
  border-bottom: 0;
}

.rm-compare__cell:last-child {
  border-right: 0;
}

.rm-compare__label {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 148px;
  min-width: 148px;
  max-width: 148px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #555;
  background: var(--rm-mint-2);
  box-shadow: 6px 0 10px rgba(0, 0, 0, 0.04);
}

.rm-compare__cell {
  min-width: 220px;
  width: 220px;
  max-width: 280px;
  text-align: center;
  font-size: 14px;
  color: var(--rm-text);
  background: #fff;
}

.rm-compare__row--photo .rm-compare__cell,
.rm-compare__row--photo .rm-compare__label {
  background: #fff;
}

.rm-compare__row--photo .rm-compare__label {
  background: var(--rm-mint-2);
}

.rm-compare__row--pack .rm-compare__cell {
  background: var(--rm-mint-2);
}

.rm-compare__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.rm-compare__photo img {
  max-height: 160px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.rm-compare__name {
  display: block;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  color: var(--rm-text);
}

.rm-compare__name:hover {
  color: var(--rm-green-dark);
}

.rm-compare__cell strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.rm-compare__cell small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #888;
}

.rm-compare__stock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-green-dark);
}

.rm-compare__stock.is-low {
  color: var(--rm-danger);
}

.rm-compare__stock.is-out {
  color: #c0392b;
}

.rm-compare__cell .rm-btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
  width: 100%;
  max-width: 180px;
}

.rm-compare__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  width: 100%;
  max-width: 180px;
  border: 1px solid var(--rm-border);
  border-radius: 6px;
  background: #fff;
  color: #777;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rm-compare__remove:hover {
  border-color: var(--rm-danger);
  color: var(--rm-danger);
  background: #fff6f6;
}

@media (max-width: 767px) {
  .rm-compare__label {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    padding: 10px 8px;
    font-size: 11px;
  }

  .rm-compare__cell {
    min-width: 168px;
    width: 168px;
    padding: 10px 10px;
    font-size: 13px;
  }

  .rm-compare__photo {
    min-height: 110px;
  }

  .rm-compare__photo img {
    max-height: 120px;
  }

  .rm-compare__name {
    font-size: 13px;
  }

  .rm-compare__cell strong {
    font-size: 14px;
  }

  .rm-compare__cell .rm-btn,
  .rm-compare__remove {
    max-width: none;
    font-size: 11px;
    padding: 0 8px;
  }
}