/* === Layout: checkbox vlevo, název uprostřed, cena vpravo === */
.fvDoplnek.fvDoplnek-upsell .fvDoplnek-produkt form,
.fvDoplnek.fvDoplnek-upsell .fvcontent {
  width: 100% !important;
}

.fvDoplnek.fvDoplnek-upsell .fvcontent {
  display: block !important; /* přebije inline-block */
}

/* hlavička jako grid, aby se nic "nepřesouvalo" */
.fvDoplnek.fvDoplnek-upsell .fvcontent .header{
  display: grid !important;
  grid-template-columns: 22px 1fr auto; /* checkbox | text | cena */
  align-items: start;
  column-gap: 10px;
  width: 100% !important;
}

/* text v headeru (name + price) nerozbíjet do divných flexů */
.fvDoplnek.fvDoplnek-upsell .fvcontent .fvDoplnek-text{
  display: contents !important; /* nechá name v prostředním sloupci, price v posledním */
}

.fvDoplnek.fvDoplnek-upsell .fvcontent .name{
  grid-column: 2;
  font-weight: 700;
}

.fvDoplnek.fvDoplnek-upsell .fvcontent .price{
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
  font-weight: 700;
}

/* popis vždy pod hlavičkou přes celou šířku */
.fvDoplnek.fvDoplnek-upsell .fvcontent .fvDoplnek-description{
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  grid-column: 1 / -1;
  line-height: 1.5;
}

/* === MOBIL: zmenšit text (musí být !important) === */
@media (max-width: 768px){
  .fvDoplnek.fvDoplnek-upsell .fvcontent .name{
    font-size: 14px !important;
  }
  .fvDoplnek.fvDoplnek-upsell .fvcontent .price{
    font-size: 14px !important;
  }
  .fvDoplnek.fvDoplnek-upsell .fvcontent .fvDoplnek-description{
    font-size: 12.5px !important;
  }
}

/* 1) Grid sloupec může zůstat 1fr, ale name se nebude tvářit jako obří blok */
#cart-wrapper .fvDoplnek.fvDoplnek-upsell .fvcontent .header{
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto; /* bezpečnější než 1fr */
  column-gap: 12px;
  align-items: center;
}

/* 2) Name nebude "roztáhlý" (šířka podle obsahu), ale zároveň se nezničí layout */
#cart-wrapper .fvDoplnek.fvDoplnek-upsell .fvcontent .header .name{
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
}