/* Non-destructive, shared category crop. Frames keep their established dimensions. */
.home-redesign .home-category-image,
.catalog-redesign #catalogue .category-card .category-image { overflow: hidden; isolation: isolate; }
.home-redesign .home-category-image img,
.catalog-redesign #catalogue .category-card .category-image img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: var(--category-image-x, 50%) var(--category-image-y, 50%);
  transform: scale(var(--category-image-zoom, 1));
  transform-origin: var(--category-image-x, 50%) var(--category-image-y, 50%);
  mix-blend-mode: normal;
  transition: transform 230ms ease;
}
.home-redesign .home-category-image { border-radius: 3px; }
.home-redesign .home-category-index {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 24px;
  padding: 3px 5px;
  border-radius: 2px;
  color: #1a1d1b;
  background: #f7df22;
}

/* Compact selector: larger photograph without enlarging the row or covering text. */
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-card {
  --category-card-paper: #fff;
  isolation: isolate;
  background: var(--category-card-paper);
}
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-card.active { --category-card-paper: #fffce3; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-card .category-image {
  /* The compact list can be framed independently of the home/overview images. */
  --category-image-x: var(--category-compact-image-x, 50%);
  --category-image-y: var(--category-compact-image-y, 50%);
  --category-image-zoom: var(--category-compact-image-zoom, 1);
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #e6e9df;
}
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 12%) 18%, rgb(255 255 255 / 96%) 34%, var(--category-card-paper) 65%);
}
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .active .category-image::after {
  background: linear-gradient(90deg, transparent 0%, rgb(255 252 227 / 12%) 18%, rgb(255 252 227 / 96%) 34%, var(--category-card-paper) 65%);
}
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-card-copy { grid-column: 2; position: relative; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) .category-card-arrow { grid-column: 3; position: relative; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="split"] .category-image { width: 74px; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="split"] .category-image::after { display: none; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="contrast"] .category-image::after {
  background: linear-gradient(90deg, rgb(16 22 16 / 8%) 0%, rgb(16 22 16 / 78%) 29%, rgb(16 22 16 / 92%) 100%);
}
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="contrast"] h4 { color: #fff; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="contrast"] :is(p, .category-card-arrow) { color: #d4d9ce; }
.catalog-redesign #catalogue .catalog-browser:not(.category-overview) [data-category-image-style="contrast"].active { border-color: #b7a20e; box-shadow: inset 3px 0 0 #f7df22; }
.catalog-redesign #catalogue .category-image > svg { position: relative; z-index: 1; width: 24px; height: 24px; margin: 15px; color: #6a735f; }

@media (hover: hover) and (pointer: fine) {
  .home-redesign .home-category-card:hover .home-category-image img,
  .catalog-redesign #catalogue .category-card:hover .category-image img { transform: scale(calc(var(--category-image-zoom, 1) + .04)); }
  .catalog-redesign #catalogue .category-card:hover { border-color: #9caa8c; }
  .catalog-redesign #catalogue .category-card.active:hover { border-color: #b7a20e; }
}
@media (prefers-reduced-motion: reduce) {
  .home-redesign .home-category-image img,
  .catalog-redesign #catalogue .category-card .category-image img { transition: none; }
  .home-redesign .home-category-card:hover .home-category-image img,
  .catalog-redesign #catalogue .category-card:hover .category-image img { transform: scale(var(--category-image-zoom, 1)); }
}