/* Storefront card stability.
 *
 * Product and set cards may change colour, border and shadow on hover, but
 * their geometry must remain stable.  Moving the card, its image, controls or
 * badges makes dense catalog rows visibly shake and can reveal neighbouring
 * layers at the card boundary.
 */

.pcard,
.pc,
.hc-pcard,
.set-item-card,
.hc-set-card {
  transform: none;
  transition-property: border-color, box-shadow, background-color, color, opacity, filter;
  will-change: auto;
}

.hc-recent-card,
.hc-pdp-recently__card {
  transform: none;
  transition-property: border-color, box-shadow, background-color, color, opacity, filter;
  will-change: auto;
}

.pcard:hover,
.pcard:focus-within,
.pc:hover,
.pc:focus-within,
.hc-pcard:hover,
.hc-pcard:focus-within,
.set-item-card:hover,
.set-item-card:focus-visible,
.hc-set-card:hover,
.hc-set-card:focus-visible {
  transform: none;
}

.hc-recent-card:hover,
.hc-recent-card:focus-visible,
.hc-pdp-recently__card:hover,
.hc-pdp-recently__card:focus-visible {
  transform: none;
}

.pcard-media,
.pcard-c__media {
  padding: 2%;
}

.pcard-media__img,
.pcard-media picture img,
.pcard-c__media img,
.pcard-a__media img,
.pcard-b__media img,
.pcard-d__media img,
.pc-media__img,
.hc-pcard__media img,
.hc-pcard__svg-fallback svg {
  padding: 2%;
  transform: none;
  transition-property: opacity, filter;
}

.pcard:hover .pcard-media__img,
.pcard:hover .pcard-media picture img,
.pcard:hover .pcard-c__media img,
.pcard:hover .pcard-a__media img,
.pcard:hover .pcard-b__media img,
.pcard:hover .pcard-d__media img,
.pc:hover .pc-media__img,
.hc-pcard:hover .hc-pcard__media img,
.hc-pcard:hover .hc-pcard__svg-fallback svg {
  transform: none;
}

.pcard-overlay__actions,
.pcard-c__actions,
.pcard-act,
.pc-action,
.hc-pcard__tools,
.hc-pcard__tool,
.hc-pcard__fav,
.pcard-c__cta,
.pcard-a__cta,
.pcard-b__cta,
.pcard-d__cta,
.pcard-mini__cta,
.pc-cta,
.pc-badge,
.pcard-badge,
.hc-pcard .tile-badge {
  transform: none;
  transition-property: opacity, color, background-color, border-color, box-shadow, filter;
}

.pcard:hover .pcard-overlay__actions,
.pcard:focus-within .pcard-overlay__actions,
.pcard:hover .pcard-c__actions,
.pcard:focus-within .pcard-c__actions,
.pcard-act:hover,
.pc-action:hover,
.hc-pcard:hover .hc-pcard__tools,
.hc-pcard:focus-within .hc-pcard__tools,
.hc-pcard__tool:hover,
.hc-pcard__fav:hover,
.pcard-c__cta:hover,
.pcard-a__cta:hover,
.pcard-b__cta:hover,
.pcard-d__cta:hover,
.pcard-mini__cta:hover,
.pc-cta:hover,
.pcard:hover .pc-badge,
.pcard:hover .pcard-badge,
.hc-pcard:hover .tile-badge {
  transform: none;
}

/* Do not grow a hidden hover row and change the card height. */
.pcard--b .pcard-b__hoverband,
.pc-b .pc-b__hoverband {
  max-height: none;
  opacity: 1;
  transform: none;
}

/* Ready sets: compact, balanced rows with a fixed 4:3 media field. */
.set-items-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  margin-inline: auto;
}

.set-items-grid[data-count="1"] {
  grid-template-columns: minmax(0, 280px);
  max-width: 280px;
}

.set-items-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 280px));
  max-width: 578px;
}

.set-items-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 280px));
  max-width: 876px;
}

.set-item-card__img {
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  padding: 2%;
  transform: none;
  transition-property: opacity, filter;
}

.set-item-card {
  max-height: 430px;
}

.hc-set-card {
  max-height: 460px;
}

.set-item-card:hover .set-item-card__img {
  transform: none;
}

.hc-sets-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pcard-action-form {
  display: contents;
  margin: 0;
  padding: 0;
}

.pcard-action-form--icon {
  line-height: 0;
}

/* The configurator is a guided workflow, not a moving tile playground. */
.bb2 :is(
  .bb2__preset,
  .bb2__filter-val,
  .bb2__param-btn,
  .bb2__prod,
  .bb2__quickstart,
  .bb2__btn,
  .bb2__rec,
  .bb2__rec-add,
  .bb2__wizard-cta
) {
  transform: none;
  transition-property: color, background-color, border-color, box-shadow, opacity, filter;
}

.bb2 :is(
  .bb2__preset,
  .bb2__filter-val,
  .bb2__param-btn,
  .bb2__prod,
  .bb2__quickstart,
  .bb2__btn,
  .bb2__rec,
  .bb2__rec-add,
  .bb2__wizard-cta
):hover {
  transform: none;
}

@media (max-width: 1080px) {
  .set-items-grid,
  .hc-sets-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .set-items-grid,
  .set-items-grid[data-count],
  .hc-sets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 480px) {
  .set-items-grid,
  .set-items-grid[data-count],
  .hc-sets-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep the compare control clear of the mobile navigation.  While the cookie
 * decision is open it remains the only floating action, so no catalog CTA is
 * trapped between two overlays. */
@media (max-width: 640px) {
  #hc-compare-bar {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  body.cookie-banner-open #hc-compare-bar {
    display: none;
  }
}