/*
 * SD category boxes.
 *
 * Measured off the reference: tiles are 175px tall with the product image
 * *contained* and centred on #f0f0f0 (not cropped), and the label is a white
 * pill inset 15px from the bottom-left corner — not a caption underneath.
 * Six across at desktop.
 */
/* Measured gap between category tiles: 9.9px. */
.sd-imagebox__grid { display: grid; gap: 9.9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .sd-imagebox__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sd-imagebox__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sd-imagebox {
  position: relative; display: block;
  color: #4c4d4f; text-decoration: none;
  min-height: 118px;
}
@media (min-width: 768px)  { .sd-imagebox { min-height: 145px; } }
@media (min-width: 1200px) { .sd-imagebox { min-height: 175px; } }
.sd-imagebox:hover { text-decoration: none; }

.sd-imagebox__media {
  display: flex; align-items: center; justify-content: center;
  margin: 0; overflow: hidden;
  background: #f0f0f0;
  height: 118px;
}
@media (min-width: 768px)  { .sd-imagebox__media { height: 145px; } }
@media (min-width: 1200px) { .sd-imagebox__media { height: 175px; } }

.sd-imagebox__image {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
/* The reference tile does not react to hover (measured: no change). */

.sd-imagebox__label {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 30px; line-height: 30px;
  background: #fff; opacity: .8;
  color: #4c4d4f; font-size: 12px; text-align: center;
}
@media (min-width: 768px) {
  .sd-imagebox__label {
    bottom: 15px; left: 15px;
    width: auto; padding: 0 15px;
    border-radius: 3px; opacity: 1;
  }
}