.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  height: 100%;
}

/* Slow push-in matching the product cards. */
.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item:hover .kombos-category-image-item__img {
  transform: scale(1.07);
}

/* Category card — product shot on a white ground with the label pinned to the
   bottom edge, and a hint that surfaces on hover. */

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 100%;
  aspect-ratio: 3 / 4.2;
  background: var(--kombos-product);
  /* Sits on the white product ground, so text takes the page-surface colour. */
  color: var(--kombos-cream);
  text-decoration: none;
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card--desktop {
  display: none;
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card--mobile {
  display: flex;
}

/* The image sits behind the label bar rather than above it in flow. */
.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2.4rem 2.4rem 5rem;
  transition: transform 1.2s var(--kombos-ease-brand);
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 29, 24, 0.2);
  pointer-events: none;
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 2rem;
  pointer-events: none;
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__label {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.1;
}

/* Rises into place and fades in with the card hover. */
.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__hint {
  flex-shrink: 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--kombos-cream);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.375rem);
  transition:
    opacity 0.5s var(--kombos-ease-brand),
    transform 0.5s var(--kombos-ease-brand);
}

.cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card:hover .kombos-category-image-item__hint {
  opacity: 1;
  transform: translateY(0);
}

/* No hover on touch — show the hint permanently so it is never unreachable. */
@media (hover: none) {
  .cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__hint {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card--desktop {
    display: flex;
  }

  .cc_xuUMlpuJCr_category_image_item .kombos-category-image-item__card--mobile {
    display: none;
  }
}