/* Shared basics, used by both blocks. */

.commerce-related-products {
  margin: 2rem 0;
}

.commerce-related-products__title {
  margin-bottom: 1rem;
}

.commerce-related-products__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
}

.commerce-related-products__item .field--name-title a {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

/* Product-level fields (title, image) read as the primary identity
   of the teaser. */
.commerce-related-products__product-fields {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Variation-level fields (sku, attributes, price) read as secondary
   detail beneath the product info - and if the variation type also
   has its own title/image, this keeps them visually distinct from
   the product's, rather than looking like duplicates. */
.commerce-related-products__variation-fields {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9rem;
  color: #555;
}

.commerce-related-products__variation-fields .field--name-price {
  font-weight: 600;
  color: inherit;
  margin-top: 0.25rem;
}

.commerce-related-products__cart .button,
.commerce-related-products__cart input[type="submit"] {
  width: 100%;
}

/* "Related products" (commerce-related-products--related.html.twig):
   a browsable grid. */

.commerce-related-products--related .commerce-related-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.commerce-related-products--related .commerce-related-products__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commerce-related-products--related .commerce-related-products__cart {
  margin-top: auto;
}

/* "Frequently purchased with"
   (commerce-related-products--frequently-purchased.html.twig): a
   horizontal bundle row, items joined by "+", ending in "= total". */

.commerce-related-products--frequently-purchased .commerce-related-products__bundle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.commerce-related-products--frequently-purchased .commerce-related-products__item {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

.commerce-related-products--frequently-purchased .commerce-related-products__joiner {
  font-size: 1.5rem;
  color: #999;
  flex-shrink: 0;
}

.commerce-related-products--frequently-purchased .commerce-related-products__totals {
  display: flex;
  flex-direction: column;
}

.commerce-related-products--frequently-purchased .commerce-related-products__total {
  font-size: 1.4rem;
  font-weight: 700;
}

.commerce-related-products--frequently-purchased .commerce-related-products__cart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.commerce-related-products--frequently-purchased .commerce-related-products__cart {
  width: 140px;
}