.compare-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 979px) { .compare-slots { grid-template-columns: 1fr; } }
.compare-slot { background: var(--color-white); border-radius: var(--radius-category-card); padding: 22px; text-align: center; }
.compare-slot select { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px; font-size: 13px; margin-bottom: 16px; outline: none; }
.compare-slot__media { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #f2efe6; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }
/* object-fit: contain, not cover -- same reasoning as .product-card__media above. */
.compare-slot__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
/* Real bug found and fixed (2026-08-22): a compared product with no real
   photo used to render the literal text "product photo" here -- a
   forgotten placeholder string. Same "AK" monogram treatment as every
   other no-image spot sitewide (product-card.css's own version, and
   cart.css's light-palette adaptation, which this matches exactly). */
.compare-slot__media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.compare-slot__media-placeholder::before {
  content: "AK";
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--color-brown-leather);
  opacity: .3;
}
.compare-slot__media--empty { border: 1px dashed #ccc; background: transparent; }

.compare-table { background: var(--color-white); border-radius: var(--radius-category-card); margin-top: 30px; overflow: hidden; overflow-x: auto; }
.compare-row { display: grid; grid-template-columns: 160px repeat(3, 1fr); border-bottom: 1px solid #eee; min-width: 640px; }
.compare-row__label { padding: 16px 20px; font-size: 12.5px; color: var(--color-text-dark-dim-2); font-weight: 700; background: #faf8f4; }
.compare-row__value { padding: 16px 20px; font-size: 13.5px; text-align: center; }