/* Related products are editorial complements, not a second product listing. */
.page-product .fa-product-complements {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2.28fr);
  gap: 26px;
  align-items: stretch;
  margin: 34px 0 38px;
  padding: 22px;
  border: 1px solid #d9e3f0;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: linear-gradient(115deg, #f3f7fc 0%, #fff 46%);
}

.page-product .fa-product-complements__intro { display: flex; flex-direction: column; justify-content: center; }
.page-product .fa-product-complements__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--accent); font: 800 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.page-product .fa-product-complements__eyebrow svg { padding: 3px; box-sizing: content-box; border-radius: 5px; background: #dceafb; }
.page-product .fa-product-complements h2 { margin: 0 0 7px; color: var(--dark); font: 800 22px/1.1 var(--sans); }
.page-product .fa-product-complements p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.page-product .fa-product-complements__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.page-product .fa-product-complement { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 8px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.page-product .fa-product-complement:hover { border-color: #9bb8dc; box-shadow: 0 7px 18px rgba(20, 50, 90, .09); transform: translateY(-1px); }
.page-product .fa-product-complement__image { display: grid; width: 76px; height: 76px; place-items: center; overflow: hidden; border-radius: 6px; background: #f6f8fa; }
.page-product .fa-product-complement__image img { width: 100%; height: 100%; object-fit: contain; }
.page-product .fa-product-complement__body { display: grid; min-width: 0; gap: 3px; }
.page-product .fa-product-complement__brand { overflow: hidden; color: var(--accent); font: 800 9px/1.1 var(--sans); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.page-product .fa-product-complement__name { display: -webkit-box; overflow: hidden; color: var(--dark); -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 700 12px/1.25 var(--sans); text-decoration: none; }
.page-product .fa-product-complement__name:hover { color: var(--accent); }
.page-product .fa-product-complement__price { color: var(--dark); font: 800 14px/1.1 var(--sans); }
.page-product .fa-product-complement__link { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font: 800 11px/1 var(--sans); text-decoration: none; }
.page-product .fa-product-complement__link:hover { color: var(--dark); }
.page-product .fa-product-complement__link svg { width: 14px; }

@media (max-width: 900px) {
  .page-product .fa-product-complements { grid-template-columns: 1fr; gap: 18px; }
  .page-product .fa-product-complements__intro { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
  .page-product .fa-product-complements__eyebrow { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; font-size: 0; }
  .page-product .fa-product-complements__eyebrow svg { width: 18px; height: 18px; }
  .page-product .fa-product-complements h2 { grid-column: 2; }
  .page-product .fa-product-complements p { grid-column: 2; }
}

@media (max-width: 640px) {
  .page-product .fa-product-complements { margin: 24px 0 30px; padding: 16px 14px; border-left-width: 3px; border-radius: 10px; }
  .page-product .fa-product-complements h2 { font-size: 19px; }
  .page-product .fa-product-complements p { font-size: 12px; }
  .page-product .fa-product-complements__items { display: flex; gap: 9px; overflow-x: auto; padding: 1px 1px 5px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .page-product .fa-product-complement { min-width: 274px; grid-template-columns: 64px minmax(0, 1fr) auto; scroll-snap-align: start; }
  .page-product .fa-product-complement__image { width: 64px; height: 64px; }
  .page-product .fa-product-complement__link span { display: none; }
}