/* ==========================================================================
   Trust + brand image components

   Drop-in children for a .row flex container. The wrapper owns layout
   (.row controls flex / gap / wrap); these classes constrain image size
   and item flex behavior.

   .trust-badge  — large guarantee / certification icon (≤6rem × 10rem)
   .retailer     — brand logo arranged in a wrap-then-fit row (≤3.5rem × 8rem)
   ========================================================================== */

.trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trust-badge img {
  height: auto;
  max-height: 6rem;
  max-width: 10rem;
  object-fit: contain;
}

/* Retailer logo row wrapper (Haga Retailer pattern). Scoping hook for the
   row's gaps; .retailer below styles the individual logo links. */
.row.retailers {
  --row-gap: var(--s-48);
  --col-gap: var(--s-48);
}

.retailer {
  --row-gap: var(--s-24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(50% - var(--s-16));
}

.retailer img {
  height: auto;
  max-height: 3.5rem;
  max-width: 8rem;
  width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.45;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.retailer:hover img,
.retailer:focus-visible img {
  filter: none;
  opacity: 1;
}

@media (min-width: 480px) {
  .retailer {
    flex: 1 1 0;
    min-width: 0;
  }
}