/**
 * Sezioni consigli FP WooCommerce: upsell scheda, cross-sell carrello,
 * consigliati checkout/thank you e box "spesso acquistati insieme".
 * L'accent eredita dalla shell prodotto (--fpwoo-rec-accent).
 */

.fpwoo-rec {
  margin: 2.5rem 0 0;
  clear: both;
}

.fpwoo-rec__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

.fpwoo-rec__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.5rem;
  background: var(--fpwoo-rec-accent, #2563eb);
  border-radius: 2px;
}

/* La griglia interna riusa ul.products del tema: non forziamo il layout,
   ci limitiamo a garantire spaziatura coerente quando il tema non la dà. */
.fpwoo-rec ul.products {
  margin-bottom: 0;
}

/* ---- Spesso acquistati insieme ---- */
.fpwoo-rec--fbt {
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
}

.fpwoo-fbt__items {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fpwoo-fbt__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 8.5rem;
  padding: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

.fpwoo-fbt__item:has(.fpwoo-fbt__check:checked) {
  border-color: var(--fpwoo-rec-accent, #2563eb);
  box-shadow: 0 0 0 1px var(--fpwoo-rec-accent, #2563eb) inset;
}

.fpwoo-fbt__check {
  align-self: flex-start;
  margin: 0;
  accent-color: var(--fpwoo-rec-accent, #2563eb);
}

.fpwoo-fbt__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 6rem;
  margin: 0 auto;
  border-radius: 6px;
}

.fpwoo-fbt__name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
}

.fpwoo-fbt__price {
  font-size: 0.85rem;
}

.fpwoo-fbt__plus {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fpwoo-rec-accent, #2563eb);
}

/* Allineato al pulsante principale "Aggiungi al carrello" della pagina
   prodotto: stesso font (1rem / 600, niente capitalize né letter-spacing),
   stessa altezza e larghezza piena, per un CTA coerente. */
.fpwoo-fbt__add {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: var(--fpwoo-rec-accent, #2563eb) !important;
  border-color: var(--fpwoo-rec-accent, #2563eb) !important;
  color: #fff !important;
  min-height: 52px;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: center;
  padding: 0.85rem 1.5rem !important;
  border-radius: 8px;
}

@media (max-width: 768px) {
  /* Su mobile: lista verticale pulita (no griglia 2-col con "+" sfasati) */
  .fpwoo-fbt__items {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .fpwoo-fbt__item {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
  }

  .fpwoo-fbt__check {
    align-self: center;
    flex: 0 0 auto;
  }

  .fpwoo-fbt__media {
    flex: 0 0 auto;
  }

  .fpwoo-fbt__media img {
    width: 3.25rem;
    max-width: 3.25rem;
    margin: 0;
  }

  .fpwoo-fbt__name {
    flex: 1 1 auto;
    text-align: left;
  }

  .fpwoo-fbt__price {
    flex: 0 0 auto;
    font-weight: 700;
  }

  .fpwoo-fbt__plus {
    align-self: center;
    font-size: 1.2rem;
    line-height: 1;
  }
}